首頁(yè) 猿問(wèn) 關(guān)于JQurey addClass方法

關(guān)于JQurey addClass方法

蘭陵王與小魯班 2014-08-19 17:45:59

<!doctype html><html><head><meta charset="UTF-8"><title>Document</title><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>這個(gè)Demo折磨了我一個(gè)下午，特來(lái)求助。在right導(dǎo)航部分，請(qǐng)問(wèn)我addClass的addbg為什么不起作用？右邊的點(diǎn)擊之后不變色是怎么回事呢親

查看完整描述

1 回答

昵稱(chēng)是啥

TA貢獻(xiàn)1條經(jīng)驗(yàn) 獲得超0個(gè)贊

你貼的代碼js沒(méi)有問(wèn)題，查看一下是不是引用別的樣式有沖突了

反對(duì) 回復(fù) 2014-08-19

蘭陵王與小魯班
謝謝哦，js沒(méi)問(wèn)題，就是addbg中的｛background:#f90;}屬性在點(diǎn)擊之后添加不上去，如果把li中的｛background：#333；｝去掉就可以了；我試著寫(xiě)了一個(gè)簡(jiǎn)單的例子，但是在簡(jiǎn)單的小例子就可以在li有背景色#333的情況下再次添加新的背景色#f90；而這個(gè)Demo中就不行，郁悶死了啊

回復(fù) 2014-08-20