Question

我只是想问一下，根据我在网站上访问的页面，我将如何将类属性“活动”转移。

例如[Bootstrap代码段]：

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

因此，如果我访问个人资料，该课程将转移到个人资料的<li>标记。

Answer 1

试试这个

<ul class="nav nav-pills">
  <li <?php if($_SERVER['REQUEST_URI']=='/index.php'){ ?> class="active" <?php } ?>><a href="#">Home</a></li>
  <li <?php if($_SERVER['REQUEST_URI']=='/profile.php'){ ?> class="active" <?php } ?>><a href="#">Profile</a></li>
  <li <?php if($_SERVER['REQUEST_URI']=='/message.php'){ ?> class="active" <?php } ?>><a href="#">Messages</a></li>
</ul>

//我们正在使用像index.php，profile.php，message.php这样的demo php文件。你可以使用自己的

希望它会有所帮助

Answer 2

如果您不介意在您的网站上使用Javascript，Bootstrap有一些内置功能可以帮您完成。只需确保您的目标具有可解析ID（例如<div id="home">）。

我遇到这个设计的最大问题是所有的“页面”都是在加载时呈现的。如果我根据用户输入构建任何变化，我发现自己必须使用大量的AJAX。

来自bootstrap网站：

<强>标记只需在元素上指定data-toggle =“tab”或data-toggle =“pill”，即可激活制表符或精选导航而无需编写任何JavaScript。将nav和nav-tabs类添加到选项卡ul将应用Bootstrap选项卡样式。

<ul class="nav nav-tabs">
    <li><a href="#home" data-toggle="tab">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#messages" data-toggle="tab">Messages</a></li>
    <li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>

制作动态导航

2 个答案: