jquery删除样式
- HTML code
<ul> <li class="li_1_current" onmouseover="changeTab('1')"></li> <li class="li_2" onmouseover="changeTab('2')"></li> <li class="li_3" onmouseover="changeTab('3')"></li> </ul>js部分
- JScript code
function changeTab(index) { for(var i=1;i<=3; i++) { if(index==i) { $(".li_"+i).addClass("li_"+i+"_current"); $(".magazine_list_"+i).show(); } else { $(".li_"+i).removeClass("li_"+i+"_current").addClass("li_"+i); $(".magazine_list_"+i).hide(); } } }当我的鼠标移动到第二、三个选项卡的时候，第一个选项卡的样式li_1_current，没有被替换掉，这是因为什么呢？
求各位大侠帮忙解决一下。
[解决办法]
你一直都是 addClass ，没有 removeClass ，但是不会替换掉原来的样式，因为样式变成了：
class="li_1_current li_1"
同时拥有两个样式了
你要进行替换的时候，用 removeClass 把原来的样式先移出，再 addClass 新样式，这样就可以
[解决办法]
简单的实现了一下，有兴趣看看吧：
- HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/> <title>test-csdn-slide</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <style type="text/css"> *{ margin:0; padding:0;} body{ background:#3f3f3f;font:12px/2 arial;} ul,li{list-style-type:none;} a{color:#24d;text-decoration:none;} a:hover{color:#e40000;text-decoration:underline;} a:focus{outline:0;} .container{ width:1000px; margin:0 auto; background:#fff; overflow:hidden; padding:15px;} .silder{ float:left; width:200px; height:500px; border-right:1px solid #ccc;} .main{ float:right; width:770px;} .slide_menu li{ line-height:30px;} .slide_menu li a{ padding:5px 7px;} .slide_menu li a:hover,.slide_menu li.current a{ background:#c86e19; color:#fff; text-decoration:none;} </style></head><body><div class="container"> <div class="silder"> <ul class="slide_menu"> <li><a href="#"><span></span>我的首页</a></li> <li><a href="#"><span></span>我的博客</a></li> <li><a href="#"><span></span>我的心情日记</a></li> </ul> </div> <div class="main"> <ul class="main_cont"> <li>我是首页内容</li> <li style="display:none;">我的博客内容</li> <li style="display:none;">我的心情日记内容</li> </ul> </div></div><script type="text/javascript"> function s_menu(){ $('.slide_menu>li').hover(function(){ var iVal = $(this).index(); $(this).addClass('current'); $('.main_cont>li').eq(iVal).show().siblings('li').hide(); }, function(){ $(this).removeClass('current'); $('.main_cont>li').eq(0).show().siblings('li').hide(); }); } s_menu();</script></body></html>
[解决办法]
当你的鼠标移动到第二、三个选项卡的时候，else语句里面的第一句$(".li_"+i).removeClass("li_"+i+"_current").addClass("li_"+i); 没执行，它根本就找不着$(".li_"+i)
要不你把结构里的第一句li改为<li class="li_1 li_1_current" onmouseover="changeTab('1')"></li>，这样就可以的了
[解决办法]
可以使用jqueryui的tabs组件
[解决办法]
用removeClass去移除你的样式。