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

快来帮帮我,找问题找了3个小时了。本萌妹快哭了= =

我那个滚动条下滑样式始终添加不上去,删却能删掉,控制台也没有报错,也可以接收到currid

这好像是出问题的地方:

var k=$('.ys2');     //k为导航里第一个a

 if(currid && currid!=k.attr('href')){

k.removeClass('ys2');  //可以删掉

$('.ul1').find("[href="+ currid +"]").addClass('ys2'); //  这个没有反应

                  console.log(currid)  //控制台可以接收到currid

   }

})

//下面是我写的全部代码   可以拷贝submit text3中运行看看

*{

padding: 0px;

margin: 0px;

}

#content{

           width: 800px;

           margin: 0 auto;

           margin-top: 20px;

}

.ys{

padding: 15px;

border:1px green solid;

margin-bottom: 20px; 

}

.ys ul{

list-style: none;

border-top: 2px blue solid;

}

.ys ul li{

display: inline-block;

margin: 10px 0 0 10px;

}

.ys ul li img{

width: 230px;

height: 230px;

}

.ul1{

position: fixed;

top: 100px;

left: 50%;

margin-left: 400px;

list-style: none;

}

.ul1 li{

line-height: 25px;

height: 25px;

background: gray;

}

.ul1 a{

text-decoration: none;

font-size: 16px;

border: 1px #fff solid;

            color: white;

            

            padding: 2px 0px;

            display: block;

}

.ul1 a:hover{

background: red;

}

.ys2{

background: red;

}

</style>

<script src='jquery.js'></script>

<script type="text/javascript">

$(document).ready(function(){

$(window).scroll(function(){

var currid;

var m=$(document).scrollTop();

$('#content').find('.ys').each(function(){

var n=$(this).offset().top;

if(m>n-200){

currid='#'+$(this).attr('id');

}else{

return false

}

   });

var k=$('.ys2');

 if(currid && currid!=k.attr('href')){

k.removeClass('ys2');

$('.ul1').find("[href="+ currid +"]").addClass('ys2');

                  console.log(currid)

   }

})

})

</script>

</head>

<body>

<ul class="ul1">

<li><a href="#item1" class="ys2">1F xixi</a></li>

<li><a href="#item2">2F xixi</a></li>

<li><a href="#item3">3F xixi</a></li>

<li><a href="#item4">4F xixi</a></li>

<li><a href="#item5">5F xixi</a></li>

<li><a href="#item6">6F xixi</a></li>

</ul>

<div id="content">

<h1>地狗购物网</h1>

<div id="item1" class="ys">

<h2>1F</h2>

<ul>

<li><a href='#'><img src="1.jpg"></a></li>

<li><a href='#'><img src="1.jpg"></a></li>

<li><a href='#'><img src="1.jpg"></a></li>

<li><a href='#'><img src="1.jpg"></a></li>

<li><a href='#'><img src="1.jpg"></a></li>

<li><a href='#'><img src="1.jpg"></a></li>

<li><a href='#'><img src="1.jpg"></a></li>

<li><a href='#'><img src="1.jpg"></a></li>

<li><a href='#'><img src="1.jpg"></a></li>

</ul>

</div>

<div id="item2" class="ys">

<h2>2F</h2>

<ul>

<li><a href='#'><img src="2.jpg"></a></li>

<li><a href='#'><img src="2.jpg"></a></li>

<li><a href='#'><img src="2.jpg"></a></li>

<li><a href='#'><img src="2.jpg"></a></li>

<li><a href='#'><img src="2.jpg"></a></li>

<li><a href='#'><img src="2.jpg"></a></li>

<li><a href='#'><img src="2.jpg"></a></li>

<li><a href='#'><img src="2.jpg"></a></li>

<li><a href='#'><img src="2.jpg"></a></li>

</ul>

</div>

<div id="item3" class="ys">

<h2>3F</h2>

<ul>

<li><a href='#'><img src="3.jpg"></a></li>

<li><a href='#'><img src="3.jpg"></a></li>

<li><a href='#'><img src="3.jpg"></a></li>

<li><a href='#'><img src="3.jpg"></a></li>

<li><a href='#'><img src="3.jpg"></a></li>

<li><a href='#'><img src="3.jpg"></a></li>

<li><a href='#'><img src="3.jpg"></a></li>

<li><a href='#'><img src="3.jpg"></a></li>

<li><a href='#'><img src="3.jpg"></a></li>

</ul>

</div>

<div id="item4" class="ys">

<h2>4F</h2>

<ul>

<li><a href='#'><img src="4.jpg"></a></li>

<li><a href='#'><img src="4.jpg"></a></li>

<li><a href='#'><img src="4.jpg"></a></li>

<li><a href='#'><img src="4.jpg"></a></li>

<li><a href='#'><img src="4.jpg"></a></li>

<li><a href='#'><img src="4.jpg"></a></li>

<li><a href='#'><img src="4.jpg"></a></li>

<li><a href='#'><img src="4.jpg"></a></li>

<li><a href='#'><img src="4.jpg"></a></li>

</ul>

</div>

<div id="item5" class="ys">

<h2>5F</h2>

<ul>

<li><a href='#'><img src="5.jpg"></a></li>

<li><a href='#'><img src="5.jpg"></a></li>

<li><a href='#'><img src="5.jpg"></a></li>

<li><a href='#'><img src="5.jpg"></a></li>

<li><a href='#'><img src="5.jpg"></a></li>

<li><a href='#'><img src="5.jpg"></a></li>

<li><a href='#'><img src="5.jpg"></a></li>

<li><a href='#'><img src="5.jpg"></a></li>

<li><a href='#'><img src="5.jpg"></a></li>

</ul>

</div>

<div id="item6" class="ys">

<h2>4F</h2>

<ul>

<li><a href='#'><img src="6.jpg"></a></li>

<li><a href='#'><img src="6.jpg"></a></li>

<li><a href='#'><img src="6.jpg"></a></li>

<li><a href='#'><img src="6.jpg"></a></li>

<li><a href='#'><img src="6.jpg"></a></li>

<li><a href='#'><img src="6.jpg"></a></li>

<li><a href='#'><img src="6.jpg"></a></li>

<li><a href='#'><img src="6.jpg"></a></li>

<li><a href='#'><img src="6.jpg"></a></li>

</ul>

</div>

</div>

</body>

</html>


正在回答

3 回答

亲测,没毛病啊,滑动可以改变楼层样式啊,要不换一个jq库试试吧。就用老师这个版本的库

0 回复 有任何疑惑可以回复我~
#1

鱼鱼鱼iii 提问者

好无奈 果然是jq库的问题
2016-09-20 回复 有任何疑惑可以回复我~
#2

NO_3667788 回复 鱼鱼鱼iii 提问者

刚学习就是这样会各种试错,不过你坚持的精神值得点赞。
2016-09-21 回复 有任何疑惑可以回复我~

看了一下 js代码没什么问题

0 回复 有任何疑惑可以回复我~
#1

鱼鱼鱼iii 提问者

那为什么会添加不了样式?css样式出错了?
2016-09-20 回复 有任何疑惑可以回复我~

好乱啊

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

快来帮帮我,找问题找了3个小时了。本萌妹快哭了= =

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信