那個我應該是點擊的時候添加樣式其他兄弟元素隱藏各自的背景樣式轉跳到他的那個錨點那 然而好像因為我下面的$(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();
請問我這樣做的一個樓梯式導航有這種問題怎么解決啊 會重復執行添加隱藏樣式
無節操司機
2017-04-05 21:11:37