Question

我试图在滚动时更改导航栏列表项的颜色，使用jQuery .addClass，我已经成功地更改了标题的徽标和背景颜色，但我仍然坚持这一部分。 html看起来像这样：

 <nav id="tf-menu" class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 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>

      <div class="logo">
      <a class="navbar-brand white-logo" href="index.html"><img src="img/logoNewRev.png" alt="purus consultants logo" ></a>
      <a class="navbar-brand scrolling-logo" href="index.html"><img src="img/logoNew2.png" alt="purus consultants logo" ></a>
      </div>

    </div>


    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
       <li role="presentation" ><a href="index.html">home</a></li>
                        <li role="presentation"class="active"><a href="about.html">about us</a></li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"  aria-haspopup="true" aria-expanded="false">services <span class="caret"></span></a>
                            <ul class="dropdown-menu">
                                <li role="presentation" ><a href="./Implementation.html">implementation</a></li>
                                <li role="presentation" ><a href="./Training.html">training</a></li>
                                <li role="presentation" ><a href="./Support.html">support</a></li>
                            </ul>
                        </li>
                        <li role="presentation"><a href="contacts.html">contact</a></li>
                        <li role="presentation"><a href="community.html">community</a></li>
                        <li role="presentation"><a href="news.html">news</a></li>
                        <li role="presentation"><a href="FAQ's.html">faq's</a></li>
      </ul>
    </div>
  </div>
</nav>

css是这样的：

#tf-menu.navbar-default .navbar-nav .dark > li {
color: black !important;
font-size: 12px;
letter-spacing: 1px;
font-weight: bold;
}

jQuery是这样的：

$(window).bind('scroll', function() {
    var navHeight = $(window).height() - 140;
    if ($(window).scrollTop() > navHeight) {
        $('.navbar-default').addClass('on');
        $('#tf-menu.navbar-default.navbar-nav > li').addClass('dark');
        $('.logo').addClass('scrolling');

    } else {
        $('.navbar-default').removeClass('on');
        $('#tf-menu.navbar-default.navbar-nav > li').removeClass('dark');
        $('.logo').removeClass('scrolling');

    }
});

这在添加课程时有效。 .on和.scroling，我可以看到它将.dark添加到列表项中，所以我认为css是错误的，但我无法弄清楚。

Answer 1

$('#tf-menu.navbar-default.navbar-nav > li').addClass('dark');

这表示具有id tf-menu的元素也具有类navbar-default，并且还具有带直接子li的类navbar-nav。也许试试：

$('#tf-menu.navbar-default .navbar-nav').addClass('dark');

#tf-menu.navbar-default .navbar-nav.dark > li > a {
color: black !important;
font-size: 12px;
letter-spacing: 1px;
font-weight: bold;
}

或者如果你试图将个人Lis变黑

$('#tf-menu.navbar-default .navbar-nav > li').addClass('dark');

#tf-menu.navbar-default .navbar-nav > li.dark > a {
color: black !important;
font-size: 12px;
letter-spacing: 1px;
font-weight: bold;
}

定位锚点在选择器中，因为锚点可能会忽略其父颜色。

使用.addClass时，无法更改List项的颜色

1 个答案: