JQuery和自定义选项卡使用addClass和removeClass

因此，我对JQuery来说很新，并且花了5个小时才得到这个工作。如果有人有更好的方法，请我很乐意听到。JQuery和自定义选项卡使用addClass和removeClass

这是我的基本问题，它如何做得更干净，更流线？

我所做的是使用了minitabs插件，下面的代码将做的事是自定义标签来回切换。我需要一种方法让一个选项卡呈蓝色，另一个选择灰色，具体取决于我所在的选项卡。我碰到的是tab1将保持蓝色，即使当我点击tab2，只是很时髦，直到这个固定它。正如你可以看到它不是最干净的方法，但它的工作原理。我相信如果你想试试这个，minitab插件可以在这里。

http://minitabs.googlecode.com/files/jquery.minitabs.js

JQuery的：

$(document).ready(function(){ 

    $("#tabs").minitabs('slow', 'fade'); 

     $("#tab1").click(function() 
      { 
       var $this = $(this); 
       if($this.is('.removed')) 
        { 
         $this.removeClass('removed'); 
         $this.addClass('selected'); 
         $('#tab2').removeClass('selected'); 
         $("#tab2").addClass('removed'); 
       } else { 
         $('#tab2').removeClass('selected'); 
      } 
    return false; 
     }); 
     $("#tab2").click(function() 
      { 
       var $this = $(this); 
       if($this.is('.removed')) 
        { 
         $this.removeClass('removed'); 
         $this.addClass('selected'); 
         $("#tab1").removeClass('selected'); 
         $("#tab1").addClass('removed'); 
       } else { 
         $('#tab1').removeClass('selected'); 

       } 
       return false; 
     }); 
    });

身体：

<div id="tabs"> 
      <ul> 
      <li><a href="#quick-links" class="tab-l selected" id="tab1">tab-l</a></li> 
      <li><a href="#newsletter-link" class="tab-r removed" id="tab2">tab-r</a></li> 
     </ul> 

     <div id="quick-links"> 
<ul> 
    <li>Look at me getting myself all in a frenzy!</li>    
</ul> 
     </div> 

     <div id="newsletter-link"> 
    Sometimes it's would be nice if they reported the fun news! 
     </div> 

</div>

来源

2009-02-11 dvancouver

我看着这个简单，并没有看到与此不太复杂的设置，其中自动拍摄minitabs优势任何问题将“当前”类应用到当前选定的选项卡：

<head> 
    <style type="text/css"> 
    .tabs a { 
     background: grey; 
    } 
    .tabs a.current { 
     background: blue; 
    } 
    </style> 
    <script type="text/javascript"> 
    $(document).ready(function(){ 
     $("#tabs").minitabs('slow', 'fade'); 
    }); 
    </script> 
</head> 
<body> 
    <div id="tabs"> 
     <ul class="tabs"> 
      <li><a href="#quick-links" class="tab-l current" id="tab1">tab-l</a></li> 
      <li><a href="#newsletter-link" class="tab-r" id="tab2">tab-r</a></li> 
     </ul> 

     <div id="quick-links"> 
      <ul> 
       <li>Look at me getting myself all in a frenzy!</li> 
      </ul> 
     </div> 

     <div id="newsletter-link"> 
      Sometimes it's would be nice if they reported the fun news! 
     </div> 
    </div> 
</body>

对于我来说，处理你的情况你完美描述。

来源

2009-02-11 10:04:39 David

我想我可以做到这一点，简单的方法，哈哈！谢谢你的工作奇迹。 – dvancouver 2009-02-11 20:12:50

JQuery和自定义选项卡使用addClass和removeClass

回答

相关问题