php - 制作动态导航

Question

我只想问我是否会根据我在我的网站上访问的页面来转移类属性“活动”。

例如[引导片段]：

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

所以如果我访问profile，这个类就会被转移到<li>Profile的标签中。

Answer 1

Try this

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

//we are taking demo php file like index.php,profile.php,message.php. you can use your own

Hope it will help

Answer 2

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

我在这个设计中遇到的最大问题是你所有的“页面”都是在加载时呈现的。如果我要构建任何基于用户输入而改变的东西，我发现自己不得不使用大量的 AJAX。

从引导站点：

标记 您无需编写任何 JavaScript 即可激活选项卡或药丸导航，只需在元素上指定 data-toggle="tab" 或 data-toggle="pill"。将 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>