单击时无法更改当前活动的引导导航栏列表项文本颜色？答案

【问题标题】：Failed to change the currently active bootstrap navbar list item text color on click?单击时无法更改当前活动的引导导航栏列表项文本颜色？
【发布时间】：2018-03-05 12:59:14
【问题描述】：

我知道这个问题已经在这里被问过很多次了，但由于某种原因，它们在我的示例中都不起作用。我浪费了三天时间在网上查了一下，没有任何成功。以下是我的一些研究：

注意：下面的 jQuery 代码改变了导航栏列表项的颜色，但是当我点击页面时它又恢复了默认颜色，并且它也不会显示相对于的页面导航栏项目。注释掉 jQuery 代码会显示相对于导航栏项的页面。

HTML：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target=".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" href="{% url 'index' %}"> Blackbird </a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right" id="nav">
                <li><a href="#"> Search </a></li>
                <li class="dropdown">
                    <a href="#" id="authentication" class="dropdown-toggle" data-toggle="dropdown"> Sign In/Up <b class="caret"></b></a>
                    <ul class="dropdown-menu" class="dropdownMenu">
                        <li><a href="#"> Sign Up </a></li>
                        <li><a href="#"> Sign In </a></li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-nav navbar-left" id="nav">
                <li class="seperator"><a href="#" class="not-active"></a></li>
                <li class="selectionStyle"><a href="{% url 'articles' %}"> Article </a></li>
                <li class="selectionStyle"><a href="{% url 'contact' %}"> Contact </a></li>
            </ul>
        </div>
    </div>
</nav>

CSS：

.dropdown-menu li > a:hover,
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus{

    color: black;
}

.navbar-default .navbar-nav > li > a {

    color: white;
    font-size: 16px;
    margin-left: 30px;
    font-family: "Century Gothic";
}

/*
.navbar-default .navbar-nav > a > .active {

    color:black;
}*/

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {

    color:black;
}

.navbar-nav > .active > a {

    color: black;
    background-color: gray;
}

jQuery：

$(document).ready(function () {

    $('#nav li a').click(function(e){
        e.preventDefault();
        $('#nav li').removeClass('active');
        $(this).addClass('active');
    });
});

【问题讨论】：

标签： css twitter-bootstrap

【解决方案1】：

我终于找到了解决办法，这里是：

通过更改 jQuery 代码：

$(document).ready(function () {

  $('#nav li a').click(function(e){

        e.preventDefault(); // This does not allow to load the relative page to the nav item.

        $('#nav li').removeClass('active');
        $(this).addClass('active');
  });
});

对此：

$(document).ready(function () {

  var pathname = window.location.pathname;
  if (pathname == '/')
      $('.navbar-brand').css("color", "rgb(32, 42, 62)", "background-color", "#D3212D");
  else
        $('#nav > li > a[href="' + pathname + '"]').parent().addClass('active');

});

我能够解决我的问题 :)

【讨论】：