jquery删除样式


      <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部分 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，没有被替换掉，这是因为什么呢？
求各位大侠帮忙解决一下。

解决方案 »

  1.   

    你一直都是 addClass ，没有 removeClass ，但是不会替换掉原来的样式，因为样式变成了： class="li_1_current li_1"同时拥有两个样式了你要进行替换的时候，用 removeClass 把原来的样式先移出，再 addClass 新样式，这样就可以
      

  2.   

    简单的实现了一下，有兴趣看看吧：<!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>
      

  3.   

    当你的鼠标移动到第二、三个选项卡的时候，else语句里面的第一句$(".li_"+i).removeClass("li_"+i+"_current").addClass("li_"+i); 没执行，它根本就找不着$(".li_"+i)要不你把结构里的第一句li改为<li class="li_1 li_1_current" onmouseover="changeTab('1')"></li>，这样就可以的了
      

  4.   

    用removeClass去移除你的样式。
      

  5.   

    很感谢你这句的提醒要不你把结构里的第一句li改为<li class="li_1 li_1_current" onmouseover="changeTab('1')"></li……
    [/Quote]
      

  6.   

    关键字：Slide Menu
    Slide Menu是一个非常好的可滑动的菜单，样式丰富，可以非常简单的实现Web导航的功能 
    此产品包含在产品集合 obout components Suite 中。 
    Basic Example 　
    Basic Slide Menu is FREE
      All browsers: IE, Netscape, Mozilla, Opera, Safari 
    No time limit. No expiration. 
    Unlimited number of items 
    Sample ASP.NET
    Company Home
    Entertainment
    GamesSample Classic ASP
    osm.AddParent "p1", "Company Home"
    osm.AddChild "c1", "Entertainment", "entertainment.asp"
    osm.AddChild "c2", "Games", "games.asp 
    ASP.NET Slide Menu - Pro Version这个 没错吧？