jquery删除样式,该如何处理

2012-04-28

jquery删除样式HTML codeulliclassli_1_current onmouseoverchangeTab(1)/liliclassli_2

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去移除你的样式。

热点排行

JavaScript

jquery删除样式,该如何处理