Question

我在我为uni的评估任务创建的站点上实现了bootstrap3导航栏。我用一个网站生成了一个半花式导航栏，在鼠标悬停等位置上带有颜色。

我正在尝试设置一个脚本来突出显示活动页面（在导航栏上），但是我没有运气。

我已经尝试过多次尝试设置脚本，但是即使使用其他问题作为参考，我也无济于事。

这是我的导航条代码（来自导航条生成器的模板）：

<header class="navbar navbar-default navbar-fixed-top bs-docs-nav" role="banner">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
            <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">FACEBOOK LITE</a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
            <ul class="nav navbar-nav">
                <li>
                    <a href="index.php" name="loginnav"><span class="glyphicon glyphicon-log-in"></span>&nbsp;&nbsp;Login</a>
                </li>
                <li>
                    <a href="register.php"><span class="glyphicon glyphicon-pencil"></span>&nbsp;&nbsp;Register</a>
                </li>
                <li>
                    <a href="main.php"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;Home</a>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-user"></span>&nbsp;&nbsp;My Account<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span class="glyphicon glyphicon-edit"></span>&nbsp;&nbsp;Account Preferences</a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-log-out"></span>&nbsp;&nbsp;Log Out</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>
</header>

这是我为导航栏定制的CSS（由导航栏生成器创建）

.navbar-default { background-color: #1658BA}
.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { background-color: #3D7EFF}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.open>a,.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover,.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { background-color: #3D7EFF}
.dropdown-menu { background-color: #D1E0FF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #3D7EFF}
.navbar-default { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-default { border-color: #080808}
.navbar-default .navbar-brand { color: #FFFFFF}
.navbar-default .navbar-brand:hover { color: #FFFFFF}
.navbar-default .navbar-nav>li>a { color: #FFFFFF}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #FFFFFF}
.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus { color: #FFFFFF}
.dropdown-menu>li>a { color: #333333}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF}
.navbar-default .navbar-nav>.dropdown>a .caret { border-top-color: #999999}
.navbar-default .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-default .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999}
.navbar-default .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}

最后这就是我的头（引导程序和jquery文件以及看起来应该可以正常工作的脚本）：

<head>
        <!--// Bootstrap Defaults //-->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">


        <!--// JQuery Files //-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


        <!--// Bootstrap Files //-->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

        <!--// Navbar Active Script //-->
        <script>
            $(document).ready(function() {
                $('li.active').removeClass('active');
                $('a[href="' + location.pathname + '"]').closest('li').addClass('active'); 
            });
        </script>

        <!--// Custom CSS Stylesheet //-->
        <link type="text/css" rel="stylesheet" href="default.css">
</head>

如前所述，我尝试了几种不同的脚本，但似乎没有一个起作用。

我只想让导航栏根据我当前所在的页面突出显示当前的.li（将class设置为“ active”）。

您可以在此处查看网站：http://titan.csit.rmit.edu.au/~s3605062

因此，您可以看到鼠标悬停时蓝色突出显示如何工作，但对于活动页面而言，蓝色突出显示不会一直保持突出显示。

非常感谢您的帮助，谢谢！

Ricky

无法获取boostrap 3导航栏以正确显示活动颜色

0 个答案: