如何使用 bootstrap3 和 php 突出显示标题中的活动页面

How do you highlight the active page in your header using bootstrap3 and php?

本文关键字：标题 活动页 显示 bootstrap3 何使用 php      更新时间：2023-09-26

我想花点时间发布一些东西，如果Stack Overflow上有这样的文章，这将极大地帮助我并节省我数小时的时间。有人建议我将此作为问题发布并回答我自己的问题。

问题：我想有一个使用 bootstrap 3 的导航栏，它可以识别我所在的页面并在标题中突出显示正确的选项卡。我尝试了很多东西，包括创建使用文件路径、文件名等的函数。因为我的项目，我什么都做不了。我还达到了一个点，我可以突出显示我单击的选项卡，但它将不再切换页面。

我将发布我的解决方案作为我自己问题的答案。如果有人有更好的方式与社区分享我的策略，请随时指出我正确的位置，我会移动我的信息。

在 header.php 文件中，这是我用来创建导航栏的代码，并使用 Bootstrap 3 中的导航药丸有效地突出显示正确的选项卡：

<div class="collapse navbar-collapse" id="navbar-collapsed">
        <ul class="nav nav-pills">
             <li <?php if($current == 'home') {echo 'class="active"';}?>>
                <a href="<?php echo $scfg_baseurl ?>/index.php">Home</a></li>
            <li <?php if($current == 'order') {echo 'class="active"';}?>>
                <a href="<?php echo $scfg_baseurl ?>/order_manager/index.php">Order Online</a></li>
            <li <?php if($current == 'about') {echo 'class="active"';}?>>
                <a href="<?php echo $scfg_baseurl ?>/about_us/index.php">About Us</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="home">...</div>
            <div role="tabpanel" class="tab-pane" id="OrderOnline">...</div>
            <div role="tabpanel" class="tab-pane" id="AboutUs">...</div>
        </div>
    </div>

然后，在我想加载导航栏的每个页面上（主页、在线订购、关于我们），我在 session_start（）;

$current = 'home';

或

$current = 'order';

或

$current = 'about';

取决于我所在的页面，以便我可以在头文件中适当地引用它。通过在页面加载之前为我感兴趣的页面名称分配当前，我能够在导航栏中正确突出显示相应的选项卡。

我希望这对某人有所帮助，就像它对我有帮助一样。

我要感谢Team Tree House发布这篇文章，引导我解决我的问题。

欢迎反馈。

相关文章：