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

Answer 1

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

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

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

然后使用条件语句，例如

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

因此，示例代码将是：

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

看