Question

I need help. I have 6 tabs on website. But when i`m clicking to one of the tab, all other tabs changes too. How i can to have unigue id for every tab ? Please help. This my codes:

   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;
       });
   });

This is my html – 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

I use that way in my projects. Try this:

// 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; }

I hope this helps..