您现在的位置是： 首页前端

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

发布时间：2021-07-08作者：小灵龙点击：171

 
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>

　　

标签：
阿里云免费试用