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

我知道这个问题在这里已经被问过很多次了，但是由于某些原因，我的例子中没有一个能够工作。通过在互联网上查找，我浪费了三天，却没有取得任何成功。下面是我的一些研究：点击时无法更改当前活动的引导程序导航栏列表项文本颜色？

注意：以下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'); 
    }); 
});

来源

2017-09-24 Ahtisham

我终于找到了解决方案，那就是：

通过改变从这个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'); 

});

我能解决我的问题:)

来源

2017-09-25 03:18:31 Ahtisham

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

回答

相关问题