Question

在我的菜单主菜单中默认有活动类但是当我要点击另一个菜单时，这个活动菜单没有活动类，但我该怎么做。

我的代码

    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-header">
             <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#"><img src="logoaaa.png"  class="brand_image"></a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active">
                    <a href="<?php print'?v=home'; ?>">Home</a>
                </li>


                <li >
                    <a href="<?php print'?v=service'; ?>">Service</a>
                </li>
                <li >
                    <a href="<?php print'?v=pfolio'; ?>">Portfolio</a>
                </li>

                <li >
                    <a href="<?php print'?v=about'; ?>">About Us</a>
                </li>
                <li >
                    <a href="<?php print'?v=contact'; ?>">Contact</a>
                </li>                                                                           
            </ul>


        </div>

    </nav>

Answer 1

请吧...

HTML

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <a class="active" href="<?php print'?v=home'; ?>">Home</a>
                </li>


                <li >
                    <a href="<?php print'?v=service'; ?>">Service</a>
                </li>
                <li >
                    <a href="<?php print'?v=pfolio'; ?>">Portfolio</a>
                </li>

                <li >
                    <a href="<?php print'?v=about'; ?>">About Us</a>
                </li>
                <li >
                    <a href="<?php print'?v=contact'; ?>">Contact</a>
                </li>                                                                           
            </ul>


        </div>

脚本

<script type='text/javascript'>
$(window).load(function(){
$("#bs-example-navbar-collapse-1 a").click(function() {
    $('.active').removeClass('active');
    $(this).addClass("active");
});
});  
</script>

CSS

.navbar .nav > li > a.active {background:#7F7F7F; color:#fff;}

Answer 2

我这样做的方式是。在每个php页面的顶部（about.php，contact.php，index.php，...等）添加此变量<?php $thisPage="Your_page_here"; ?>

现在在header.php文件中（或者任何文件都有导航栏）。添加一个条件语句，检查您所在的页面。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> <a class="navbar-brand" href="#"><img src="logoaaa.png"  class="brand_image"></a>
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li <?php if ($thisPage=="home") echo " class=\"active\""; ?> >
                <a href="<?php print'?v=home'; ?>">Home</a>
            </li>


            <li <?php if ($thisPage=="service") echo " class=\"active\""; ?>  >
                <a href="<?php print'?v=service'; ?>">Service</a>
            </li>
            <li <?php if ($thisPage=="pfolio") echo " class=\"active\""; ?>  >
                <a href="<?php print'?v=pfolio'; ?>">Portfolio</a>
            </li>

            <li <?php if ($thisPage=="about") echo " class=\"active\""; ?> >
                <a href="<?php print'?v=about'; ?>">About Us</a>
            </li>
            <li <?php if ($thisPage=="contact") echo " class=\"active\""; ?> >
                <a href="<?php print'?v=contact'; ?>">Contact</a>
            </li>                                                                           
        </ul>


    </div>

</nav>

使用Bootstrap 3 Navbar切换活动选项卡

2 个答案: