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/