为了账号安全,请及时绑定邮箱和手机立即绑定

请问我这样做的一个楼梯式导航有这种问题怎么解决啊 会重复执行添加隐藏样式

请问我这样做的一个楼梯式导航有这种问题怎么解决啊 会重复执行添加隐藏样式

那个我应该是点击的时候添加样式其他兄弟元素隐藏各自的背景样式转跳到他的那个锚点那 然而好像因为我下面的$(window).scroll(function ()函数用来控制滚动条显示隐藏样式给重复执行了 只要点击其他附近的锚点时候 先是隐藏其他兄弟的样式,然后因为滚动条控制兄弟元素的背景再度会显示一遍再隐藏请问我该怎么改啊 我知道我做的很渣没办法每个锚点背景图不同只能用这种死办法QWQ<div id="menu">    <ul>            <li></li>            <li></li>            <li></li>            <li></li>            <li class="top"></li>        </ul>    </div>#menu{    width:32px;height:360px;    position:fixed;    top:35%;left:50px;    z-index: 3;    list-style: none;    display: none;}#menu li{ text-align: center; margin: 30px auto; cursor: pointer; background: url(img/dod.png); background-size: cover; width: 10px; height: 10px;}#menu .message{ background: url(img/xinxi.png); background-size: cover; transform: scale(0); animation: scales 1s forwards;}#menu .jishus{ background: url(img/jineng.png); background-size: cover; transform: scale(0); animation: scales 1s forwards;}#menu .licheng{ background: url(img/jinli.png); background-size: cover; transform: scale(0); animation: scales 1s forwards;}#menu .sakuhin{ background: url(img/zuoping.png); background-size: cover; transform: scale(0); animation: scales 1s forwards;}#menu .top{ background: url(img/top.png); background-size: cover; transform: scale(0); animation: scales 1s forwards;}@keyframes scales{ from{ transform: scale(0); } to{ transform: scale(3); }}  function louti(){        var _index=0;        $("#menu ul li:eq(0)").click(function(){                        $(this).addClass('message');            $("#menu ul li:eq(1)").removeClass('jishus');            $("#menu ul li:eq(2)").removeClass('licheng');            $("#menu ul li:eq(3)").removeClass('sakuhin');            //通过拼接字符串获取元素,再取得相对于文档的高度            var _top=$("#louti1").offset().top;            //scrollTop滚动到对应高度            $("body,html").animate({scrollTop:_top},500);        });        $("#menu ul li:eq(1)").click(function(){                        $(this).addClass('jishus');            $("#menu ul li:eq(0)").removeClass('message');            $("#menu ul li:eq(2)").removeClass('licheng');            $("#menu ul li:eq(3)").removeClass('sakuhin');            //通过拼接字符串获取元素,再取得相对于文档的高度            var _top=$("#louti2").offset().top;            //scrollTop滚动到对应高度            $("body,html").animate({scrollTop:_top},500);        });        $("#menu ul li:eq(2)").click(function(){                        $(this).addClass('licheng');            $("#menu ul li:eq(1)").removeClass('jishus');            $("#menu ul li:eq(0)").removeClass('message');            $("#menu ul li:eq(3)").removeClass('sakuhin');            //通过拼接字符串获取元素,再取得相对于文档的高度            var _top=$("#louti3").offset().top;            //scrollTop滚动到对应高度            $("body,html").animate({scrollTop:_top},500);        });        $("#menu ul li:eq(3)").click(function(){                        $(this).addClass('sakuhin');            $("#menu ul li:eq(1)").removeClass('jishus');            $("#menu ul li:eq(2)").removeClass('licheng');            $("#menu ul li:eq(0)").removeClass('message');            //通过拼接字符串获取元素,再取得相对于文档的高度            var _top=$("#louti4").offset().top;            //scrollTop滚动到对应高度            $("body,html").animate({scrollTop:_top},500);        });        $("#menu ul li:eq(4)").click(function(){            $("#menu ul li:eq(0)").removeClass('message');            $("#menu ul li:eq(1)").removeClass('jishus');            $("#menu ul li:eq(2)").removeClass('licheng');            $("#menu ul li:eq(3)").removeClass('sakuhin');            var _top=$("#louti5").offset().top;            //scrollTop滚动到对应高度            $("body,html").animate({scrollTop:_top},500);        });        $(".down").click(function(){            var _top=$("#louti1").offset().top;            //scrollTop滚动到对应高度            $("body,html").animate({scrollTop:_top},500);        });               $(window).scroll(function () {         if ($(window).scrollTop() > 800 ) {             $("#menu").fadeIn();                              }        else {            $("#menu").fadeOut();          }        if ($(window).scrollTop() > 940 && $(window).scrollTop() < 2000) {             $("#menu ul li:eq(0)").addClass('message');        }        else {            $("#menu ul li:eq(0)").removeClass('message');         }        if ($(window).scrollTop() > 2000 && $(window).scrollTop() < 3000) {             $("#menu ul li:eq(1)").addClass('jishus');        }        else {            $("#menu ul li:eq(1)").removeClass('jishus');         }        if ($(window).scrollTop() > 3000 && $(window).scrollTop() < 4000) {             $("#menu ul li:eq(2)").addClass('licheng');        }        else {            $("#menu ul li:eq(2)").removeClass('licheng');         }        if ($(window).scrollTop() > 4000 && $(window).scrollTop() < 5000) {             $("#menu ul li:eq(3)").addClass('sakuhin');        }        else {            $("#menu ul li:eq(3)").removeClass('sakuhin');         }                  })  }  louti();
查看完整描述

目前暂无任何回答

  • 0 回答
  • 0 关注
  • 1678 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信