How to switch tabs using a URL link (mdl)

Question

Please tell me how to switch tabs using a URL link? I need to get a direct link to a specific tab

<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#fixed-tab-1" class="mdl-layout__tab is-active">Tab 1</a>
<a href="#fixed-tab-2" class="mdl-layout__tab">Tab 2</a>
<a href="#fixed-tab-3" class="mdl-layout__tab">Tab 3</a>
</div>

Answer 1

For Material Design Lite (or similar ones), You may dynamically determine whether is_active will be applied to the tabs

Use conditional statement such as

if ($_REQUEST["tab"]=="1") {
  $active1="is-active";
}

Then, you can use URL with the following format to do what you want

https://yourdomain/tab.php?tab=1
https://yourdomain/tab.php?tab=2
https://yourdomain/tab.php?tab=3

So, a sample code will be:

<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css" rel="stylesheet" />

<?php 

if ($_REQUEST["tab"]=="1") {
  $active1="is-active";
}

if ($_REQUEST["tab"]=="2") {
  $active2="is-active";
}

if ($_REQUEST["tab"]=="3") {
  $active3="is-active";
}

 ?>

<div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
  <div class="mdl-tabs__tab-bar">
      <a href="#starks-panel" class="mdl-tabs__tab <?php echo $active1;?>">Starks</a>
      <a href="#lannisters-panel" class="mdl-tabs__tab <?php echo $active2;?>">Lannisters</a>
      <a href="#targaryens-panel" class="mdl-tabs__tab <?php echo $active3;?>">Targaryens</a>
  </div>

  <div class="mdl-tabs__panel <?php echo $active1;?>" id="starks-panel">
    <ul>
      <li>Eddard</li>
      <li>Catelyn</li>
      <li>Robb</li>
      <li>Sansa</li>
      <li>Brandon</li>
      <li>Arya</li>
      <li>Rickon</li>
    </ul>
  </div>
  <div class="mdl-tabs__panel <?php echo $active2;?>" id="lannisters-panel">
    <ul>
      <li>Tywin</li>
      <li>Cersei</li>
      <li>Jamie</li>
      <li>Tyrion</li>
    </ul>
  </div>
  <div class="mdl-tabs__panel <?php echo $active3;?>" id="targaryens-panel">
    <ul>
      <li>Viserys</li>
      <li>Daenerys</li>
    </ul>
  </div>
</div>

See

Demo-tab1

Demo-tab2

Demo-tab3