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

关于JQurey addClass方法

关于JQurey addClass方法

兰陵王与小鲁班 2014-08-19 17:45:59
<!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 回答

?
昵称是啥

TA贡献1条经验 获得超0个赞

你贴的代码js没有问题,查看一下是不是引用别的样式有冲突了

查看完整回答
反对 回复 2014-08-19
  • 兰陵王与小鲁班
    兰陵王与小鲁班
    谢谢哦,js没问题,就是addbg中的{background:#f90;}属性在点击之后添加不上去,如果把li中的{background:#333;}去掉就可以了; 我试着写了一个简单的例子,但是在简单的小例子就可以在li有背景色#333的情况下再次添加新的背景色#f90; 而这个Demo中就不行,郁闷死了啊
  • 1 回答
  • 0 关注
  • 2193 浏览

添加回答

举报

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