Bootstrap - 基于 URL 的导航栏活动类

【问题标题】：Bootstrap - Navbar Active class based on URLBootstrap - 基于 URL 的导航栏活动类
【发布时间】：2017-05-18 23:49:10
【问题描述】：

我正在尝试弄清楚如何将导航栏按钮更改为 class= 如果用户在该页面上则处于活动状态。

我做了一些谷歌搜索，但找不到任何对我有用的东西。

这是导航栏代码，以防万一这里有问题。

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

【问题讨论】：

我知道一个简单的方法，只需在body标签中添加一个ID，然后创建一个javascript来读取body id，如果id与音频的id相同
addClass( “活跃”）；

@SampaioLeal 如果 OP 必须这样做，他们不妨手动将类添加到列表 foreach。

标签： jquery twitter-bootstrap twitter-bootstrap-3 navbar

【解决方案1】：

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

basename() 函数从路径返回文件名。

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

【讨论】：

辛苦了，我现在可以停止扯头发了！谢谢