锚点点击导航跳转到相应位置，样式随之变化

最新推荐文章于 2023-10-17 08:41:39 发布

weixin_30375427

最新推荐文章于 2023-10-17 08:41:39 发布

阅读量1k

点赞数 2

文章标签： javascript 开发工具前端 ViewUI

原文链接：http://www.cnblogs.com/qing1304197382/p/10963694.html

版权

// 锚点点击导航导航样式变化
			$("#nav-box li a").click(function () {
			    $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top -20+ "px"}, 500);
				$("#nav-box li").each(function(){
					$this = $(this);
					if($this[0].href==String(window.location)){
						$("#nav-box li").removeClass("on");
						$this.addClass("on");
					}
				});
				return false;//不要这句会有点卡顿
			});

<div class="nav" id="nav-container">
			<ul class="menu" id="nav-box">`
				<li class="on"><a href="#section1">text1-nav</a></li>
				<li><a href="#section2">text2-nav</a></li>
				<li><a href="#section3">text3-nav</a></li>
			</ul>
		</div>
		<div id="text">
			<div id="section1" style="width:100%;height:500px;background:green;text-align:center;">text1</div>
			<div id="section2" style="width:100%;height:500px;background:yellow;text-align:center;">text2</div>
			<div id="section3" style="width:100%;height:500px;background:blue;text-align:center;">text3</div>
		</div>

转载于:https://www.cnblogs.com/qing1304197382/p/10963694.html