|
1
2
3
4
5
6
7
8
9
10
11
12
|
// 锚点点击导航导航样式变化 $("#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;//不要这句会有点卡顿 }); |
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<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> |