Question

我知道这个问题在这里被多次询问，但由于某种原因，它们都没有在我的例子中起作用。通过在互联网上查找，我浪费了三天没有任何成功。以下是我的一些研究成果：

注意：以下jQuery代码更改了导航栏列表项的颜色，但是当我点击页面时它返回到默认颜色，它也不会显示相对于页面的页面导航栏项目。注释掉jQuery代码会显示相对于navbar项的页面。

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');
    });
});

Answer 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');

});

我能够解决我的问题：）

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

1 个答案: