我正在努力创建一个单页网站.目前我已经点击导航菜单滚动到网站的选定部分,活动标签也会在点击时更改.但我想弄清楚的是,当下一页滚动到(而不是在菜单中单击)时,如何将css更改为活动选项卡.
$(document).ready(function(){
$("nav ul li").click(function(){
var sectionClass = $(this).attr('class');
if ($(this).hasClass('active')){
}
else {
$("nav ul li.active").removeClass('active');
$(this).addClass('active');
sectionId = $(this).attr('id');
var parts = sectionId.split("_");
$('html, body').animate({
scrollTop: $("#" + parts[1]).offset().top
}, 'slow');
}
});
});
<body>
<nav class="nav-bar">
<ul>
<li class="active" id="menu_index">Welcome</li>
<li id="menu_page1">Menu1</li>
<li id="menu_page2">Menu2</li>
<li id="menu_page3">Menu3</li>
<li id="menu_page4">Menu4</li>
</ul>
</nav>
<div id="index"></div>
<div id="page1"></div>
<div id="page2"></div>
<div id="page3"></div>
<div id="page4"></div>
</body>
https://jsfiddle.net/nsefqo3w/
添加jsfiddle以显示它是如何现在,我是新的,所以你可能会发现一些问题!