如何使用jquery突出显示活动选项卡

Question

如何突出显示当前活动的选项卡？ 这是我的HTML代码。

<a href="#tab1"></a> 
    <a href="#tab2"></a> 
    <a href="#tab3"></a> 
    <a href="#tab4"></a> 

这是我目前使用

$(document).ready(function(){ 
      $(".tabs").not(":first").hide(); 

     $(".tab .control a").click(function(){ 
      storage = $(this).attr("href"); 
      $(".tabs").hide(); 
      $(storage).show(); 
     }); 
    }); 

Answer 1

添加一些类的标签我的jQuery代码。然后创建将被添加到单击的元素上的CSS类。

HTML：

<a href="#tab1" class="tab">Tab 1</a> 
<a href="#tab2" class="tab">Tab 2</a> 

CSS：

.tab.active { 
    background: gray; 
} 

的JavaScript：

$('.tab').on('click', function() { 
    // Remove .active class from all .tab class elements 
    $('.tab').removeClass('active'); 
    // Add .active class to currently clicked element 
    $(this).addClass('active'); 
}); 

工作例如：https://jsfiddle.net/cr29y1tc/23/