Php 如何使用URL链接(mdl)切换选项卡

对于Material Design Lite个(或类似的)，您可以动态确定是否将is_active应用于选项卡

使用条件语句，如

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

然后，您可以使用以下格式的URL来执行您想要的操作

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

因此，示例代码如下所示:

<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>

看到

Demo-tab1

Demo-tab2

Demo-tab3个