すべてのタブに1つのjqueryコードを使用

Question

私は助けが必要です。私はウェブサイト上に6つのタブを持っています。しかし、私がタブの1つをクリックすると、他のタブもすべて変更されます。すべてのタブで一意のIDを持つことができますか？助けてください。これは私のhtmlです

jQuery(document).ready(function() { 
     // When user clicks on tab, this code will be executed 
     jQuery("#tabs li").click(function() { 
      // First remove class "active" from currently active tab 
      jQuery("#tabs li").removeClass('active'); 
      // Now add class "active" to the selected/clicked tab 
      jQuery(this).addClass("active"); 
      // Hide all tab content 
      jQuery(".tab_content").hide(); 
      // Here we get the href value of the selected tab 
      var selected_tab = jQuery(this).find("a").attr("href"); 
      // Show the selected tab content 
      jQuery(selected_tab).fadeIn(); 
      // At the end, we add return false so that the click on the link is not executed 
      return false; 
     }); 
    }); 

- CSS：これは私のコードは

<style type="text/css" > 

#tabs_container { 
border-bottom: 1px solid #ccc; 
} 
#tabs { 
list-style: none; 
padding: 5px 0 4px 0; 
margin: 0 0 0 10px; 
font: 1.5em arial; 
} 
#tabs li { 
display: inline; 
} 
#tabs li a { 
border: 1px solid #ccc; 
padding: 4px 6px; 
text-decoration: none; 
background-color: #eeeeee; 
border-bottom: none; 
outline: none; 
border-radius: 5px 5px 0 0; 
-moz-border-radius: 5px 5px 0 0; 
-webkit-border-top-left-radius: 5px; 
-webkit-border-top-right-radius: 5px; 
} 
#tabs li a:hover { 
background-color: #dddddd; 
padding: 4px 6px; 
} 
#tabs li.active a { 
border-bottom: 1px solid #fff; 
background-color: #fff; 
padding: 4px 6px 5px 6px; 
border-bottom: none; 
} 
#tabs li.active a:hover { 
background-color: #eeeeee; 
padding: 4px 6px 5px 6px; 
border-bottom: none; 
} 

#tabs li a.icon_accept { 
background: #c3c3c3; 
background-position: 5px; 
background-repeat: no-repeat; 
padding-left: 24px; 
} 
#tabs li a.icon_accept:hover { 
padding-left: 24px; 
} 

#tabs_content_container { 
border: 1px solid #ccc; 
border-top: none; 
padding: 10px; 
} 
.tab_content { 
display: none; 
} 
#tabs_display { 
display:table; 
} 
</style> 
    <!-- This is the box that all of the tabs and contents of 
    the tabs will reside --> 
    <div id="tabs_container"> 
    <ul id="tabs"> 
    <li class="active"><a href="#tab1">Tab 1</a></li> 
    <li><a class="icon_accept" href="#tab2">Tab 2</a></li> 
    <li><a href="#tab3">Tab 3</a></li> 
</ul> 
</div> 
<div id="tabs_content_container"> 
<div id="tab1" class="tab_content" style="display: block;"> 
<p> tab content 1 </p> 
</div> 
<div id="tab2" class="tab_content"> 
    <p>This tab has icon in it.</p> 
</div> 
<div id="tab3" class="tab_content"> 
    <p>Suspendisse blandit velit eget erat suscipit in malesuada odio venenatis.</p> 
</div> 
</div> 

Answer 1

私は私のプロジェクトでそのように使用します。これを試してみてください：

// Javascript Part: 
$(document).ready(function() { 
    function switch_tabs($obj){ 
    // hide tab contents 
    $('.tab_content').hide(); 

    // deactivate currenct tab 
    $('.tab_links a').removeClass('active'); 

    // activate tab and show content 
    var id = $obj.attr('href'); 
    $(id).show(); 
    $obj.addClass('active'); 

} 

    $('.Tabs a').click(function(){ 
    switch_tabs($(this)); 

    return false; 
    }); 
    switch_tabs($('.Tabs a.active')); 
}); 


// HTML Part: 
<div class="Tabs"> 
    <ul class="tab_links"> 
    <li><a href="#Logs" class="active">Logs</a></li> 
    <li><a href="#Sessions">Sessions</a></li> 
    </ul> 

    <!-- Logs (tab)  --> 
    <div id="Logs" class="tab_content"> 
    LOGS CONTENT HERE 
    </div> 

    <div id="Sessions" class="tab_content"> 
    SESSIONS CONTENT HERE 
    </div> 
</div> 

// CSS Part: 
.Tabs { } 
.Tabs ul.tab_links { margin:0 0 0 10px; padding:0; list-style:none; } 
.Tabs ul.tab_links li { float:left; font-size:.75em; margin:0 0 -1px 5px; line-height:1.2em; border:1px solid #BBB; 
         background-color:#DDD; } 
.Tabs ul.tab_links a { display:block; color:#666; width:100%; height:100%; padding:2px 10px; text-decoration:none; } 
.Tabs ul.tab_links a.active {color:#BF3723; font-weight:bold; border-color:#AAA; border-bottom-color:#FFF; } 
.Tabs div.tab_content { clear:left; padding:15px; border:1px solid #BBB; } 

私はこれが役に立てば幸い..