关于JQurey addClass方法
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <script type="text/javascript" src="public/jquery.superslide.2.1.1.js"></script>
<script type="text/javascript" src="public/jquery1.42.min.js"></script>
<script type="text/javascript" src="public/jquery-1.4.2.js"></script> -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style type="text/css">
*{
margin: 0;padding: 0;
}
body{
background: #333;
}
.addbg{
background: #f90;
}
.cont{
width: 1000px;height: auto;/*background: #0c1021;*/margin: 10px auto;position: relative;
}
.right{
width: 200px;height: 400px;background: #00a0e9;position: fixed;left: 50%;top: 10px;margin-left: 300px;/*50%+margin-left: 共同定位*/
}
.right ul{
list-style: none;margin-top: 4px;margin-left: 5px;width: 190px;height: 305px;
}
.right ul li{
width: 190px;height: 50px;background: #333;
}
.right ul li :hover{
background: #f90;color: #fff;
animation:mychange 0.7s;
-webkit-animation:mychange 0.7s;
-moz-animation:mychange 0.7s;
-o-animation:mychange 0.7s;
}
@keyframes mychange{
from{background: #333}to{background: #f90}
}
@-webkit-keyframes mychange{
from{background: #333}to{background: #f90}
}
@-moz-keyframes mychange{
from{background: #333}to{background: #f90}
}
@-o-keyframes mychange{
from{background: #333}to{background: #f90}
}
.right ul li a{
display: block;width: 190px;height: 50px;text-align: center;text-decoration: none;margin-top: 1px;font: 14px Helvetica;line-height: 50px;color: #00b7ee;
}
.left{
background: #ddd;width: 799px;height: auto;position: relative;left: 0;top: 0;padding-bottom: 5px;padding-top: 15px;overflow: hidden;
}
.left div{
width: 745px;height: 400px;background: #333;margin: 0px 27px 10px 27px;
}
.left{
color: #088;line-height: 400px;text-indent: 30px;font: 50px Helvetica;font-weight: bold;letter-spacing: -2px;
}
.home{
margin-top: 10px;
}
</style>
</head>
<body>
<div>
<div>
<div id="home">Home</div>
<div id="blog">Blog</div>
<div id="contact">Contact</div>
<div id="about">About</div>
<div id="pictures">Pictures</div>
<div id="profit">Profit</div>
</div>
<div>
<ul>
<li id="link1"><a href="javascript:">Home</a></li>
<li id="link2"><a href="javascript:">Blog</a></li>
<li id="link3"><a href="javascript:">Contact</a></li>
<li id="link4"><a href="javascript:">About</a></li>
<li id="link5"><a href="javascript:">Pictures</a></li>
<li id="link6"><a href="javascript:">Profit</a></li>
</ul>
</div>
</div>
<script type="text/javascript">
$("#link1").click(function(){
$("body,html").animate({"scrollTop":"25px"})
$(this).addClass("addbg").siblings().removeClass("addbg")
})
$("#link2").click(function(){
$("body,html").animate({"scrollTop":"435px"})
$(this).addClass("addbg").siblings().removeClass("addbg");
})
$("#link3").click(function(){
$("body,html").animate({"scrollTop":"845px"})
$(this).addClass("addbg").siblings().removeClass("addbg");
})
$("#link4").click(function(){
$("body,html").animate({"scrollTop":"1255px"})
$(this).addClass("addbg").siblings().removeClass("addbg");
})
$("#link5").click(function(){
$("body,html").animate({"scrollTop":"1665px"})
$(this).addClass("addbg").siblings().removeClass("addbg");
})
$("#link6").click(function(){
$("body,html").animate({"scrollTop":"2075px"})
$(this).addClass("addbg").siblings().removeClass("addbg");
})
</script>
</body>
</html>
这个Demo折磨了我一个下午，特来求助。
在right导航部分，请问我addClass的addbg为什么不起作用？右边的点击之后不变色是怎么回事呢亲
兰陵王与小鲁班1回答
-
昵称是啥
你贴的代码js没有问题，查看一下是不是引用别的样式有冲突了
随时随地看视频慕课网APP