在滚动中使用JQuery切换类活动

Question

I am trying to toggle active class in the nav links while scrolling and here's my code :

 $(function () { "use strict"; $(window).on("scroll", function (event) { var $scrollPos = $(document).scrollTop(), $links = $('.nav ul li a'); $links.each(function () { var $currLink = $(this), $refElement = $($currLink.attr("href")); if ($refElement.position().top <= $scrollPos && $refElement.position().top + $refElement.height() > $scrollPos) { $links.removeClass("active"); $currLink.addClass("active"); } else { $currLink.removeClass("active"); } }); }); }); 

 .nav { background-color:#222; padding:15px 10px; position:fixed; top:0; left:0; width:100%; } .nav ul li { display:inline; margin:0 20px; } .nav ul li a { text-decoration:none; color:#fff; } .active { color:red; } #home,#about,#services,#contact { height:600px; } h1 { text-align:center; font-size:30px; padding:100px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="nav"> <ul> <li><a href="#home" class="smoothScroll">Home</a></li> <li><a href="#about" class="smoothScroll">About</a></li> <li><a href="#services" class="smoothScroll">Services</a></li> <li><a href="#contact" class="smoothScroll">Contact</a></li> </ul> </div> <div id="home"> <h1>Home</h1> </div> <div id="about"> <h1>about</h1> </div> <div id="services"> <h1>services</h1> </div> <div id="contact"> <h1>contact</h1> </div> 

But something went wrong and it doesn't work - maybe someone can help me find out where's my wrong.

Answer 1

Use .nav ul li a.active instead of .active because .nav ul li a is more specific style than .active - see demo below:

 $(function () { "use strict"; $(window).on("scroll", function (event) { var $scrollPos = $(document).scrollTop(), $links = $('.nav ul li a'); $links.each(function () { var $currLink = $(this), $refElement = $($currLink.attr("href")); if ($refElement.position().top <= $scrollPos && $refElement.position().top + $refElement.height() > $scrollPos) { $links.removeClass("active"); $currLink.addClass("active"); } else { $currLink.removeClass("active"); } }); }); }); 

 .nav { background-color:#222; padding:15px 10px; position:fixed; top:0; left:0; width:100%; } .nav ul li { display:inline; margin:0 20px; } .nav ul li a { text-decoration:none; color:#fff; } .nav ul li a.active { color:red; } #home,#about,#services,#contact { height:600px; } h1 { text-align:center; font-size:30px; padding:100px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="nav"> <ul> <li><a href="#home" class="smoothScroll">Home</a></li> <li><a href="#about" class="smoothScroll">About</a></li> <li><a href="#services" class="smoothScroll">Services</a></li> <li><a href="#contact" class="smoothScroll">Contact</a></li> </ul> </div> <div id="home"> <h1>Home</h1> </div> <div id="about"> <h1>about</h1> </div> <div id="services"> <h1>services</h1> </div> <div id="contact"> <h1>contact</h1> </div> 

Answer 2

use this in your css instead of only .active :

.nav ul li a.active {
    color:red;
}

OR you can use !important like this :

.active {
    color:red!important;
}

But be careful, read this subject