Bootstrap - 导航栏活动 class 基于 URL

Question

我正在尝试弄清楚如何将导航栏按钮更改为 class = active 如果用户在该页面上。

我进行了一些谷歌搜索，但找不到适合我的东西。

这里是导航栏代码，以防这里出现问题。

<nav class="navbar navbar-default" style="margin-bottom: 0px; padding-bottom: 0px; background: #64D6FF; border: 0">
  <div class="container-fluid">
    <ul class="nav navbar-nav navbar-center" style="font-size: 20px">
      <li><a href="/">Home</a></li>
      <li><a href="audio.php">Audio</a></li>
      <li><a href="visual.php>">Visual</a></li>
      <li><a href="contact.php">Contact</a></li>
    </ul>
  </div>
</nav>

Answer 1

使用PHP使用basename()函数获取当前文件名并与列表项比较，如果当前页等于列表项echo 'class="active"';

The basename() function returns the filename from a path.

<?php
    $filename = basename($_SERVER["SCRIPT_FILENAME"], '.php');
?>
<nav class="navbar navbar-default" style="margin-bottom: 0px; padding-bottom: 0px; background: #64D6FF; border: 0">
    <div class="container-fluid">
        <ul class="nav navbar-nav navbar-center" style="font-size: 20px">
            <li <?php echo ($filename == 'home') ? 'class="active"' : ''; ?>><a href="/">Home</a></li>
            <li <?php echo ($filename == 'audio') ? 'class="active"' : ''; ?>><a href="audio.php">Audio</a></li>
            <li <?php echo ($filename == 'visual') ? 'class="active"' : ''; ?>><a href="visual.php>">Visual</a></li>
            <li <?php echo ($filename == 'contact') ? 'class="active"' : ''; ?>><a href="contact.php">Contact</a></li>
        </ul>
    </div>
</nav>

Bootstrap - 导航栏活动 class 基于 URL

Bootstrap - Navbar Active class based on URL

jquery

navbar

twitter-bootstrap

twitter-bootstrap-3