Есть код , идея в том чтобы активному пункту меню присваивался класс, сейчас класс присваивается для a href="", а нужно чтобы класс добавлялся для li, не понимаю как правильно описать, то что сейчас
$('li').children('a[href="#' + id+ '"]').addClass('active').siblings().removeClass( 'active' ); - такой вариант добавляет, но не удаляет класс у ссылок
$(function(){
$("nav").on('click', '[href*="#"]', function(e){
var offset = 0;
$('html,body').stop().animate({ scrollTop: $(this.hash).offset().top - offset }, 1000);
e.preventDefault();
});
});
$(window).bind('scroll', function() {
var currentTop = $(window).scrollTop();
var elems = $('.block');
elems.each(function(index){
var elemTop = $(this).offset().top;
var elemBottom = elemTop + $(this).height();
if(currentTop >= elemTop && currentTop <= elemBottom){
var id = $(this).attr('id');
var navElem = $('a[href="#' + id+ '"]');
navElem.parent().addClass('active').siblings().removeClass( 'active' );
}
})
});
nav {
position: fixed;
top: 20px;
z-index: 9999; }
nav ul {
list-style: none; }
nav ul li {
display: inline-block; }
nav ul li a {
padding: 10px;
background-color: #666;
color: #fff; }
nav ul li a:hover {
background-color: #999999;
color: #fff;
text-decoration: none; }
nav ul li a:active {
background-color: #333333; }
.active {
background-color: skyblue; }
.active:hover, .active:active {
background-color: #5bbce4 !important; }
.block {
width: 100%;
height: 100vh; }
.block-1 {
background: tomato; }
.block-1 {
background: #ff8c66; }
.block-2 {
background: #ffb366; }
.block-3 {
background: #ffd966; }
.block-4 {
background: #ffff66; }
.block-5 {
background: #d9ff66; }
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<nav>
<ul>
<li><a href="#one">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#three">Three</a></li>
<li><a href="#four">Four</a></li>
<li><a href="#five">Five</a></li>
</ul>
</nav>
<div class="block block-1" id="one"></div>
<div class="block block-2" id="two"></div>
<div class="block block-3" id="three"></div>
<div class="block block-4" id="four"></div>
<div class="block block-5" id="five"></div>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей