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"';

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>

Bootstrap - 基于URL的Navbar Active类

1 个答案: