Jquery функция отдельно для каждой вкладки.

[r0nin]

Здрасте всем. Натолкнулся на следующий случай.
На странице должно быть несколько табов. При нажатии на на вкладку одного таба меняются все табы. Как задать это отдельно для каждого таба.
Вот коды:

// Load this script when page loads
jQuery(document).ready(function(){
 
// Set up a listener so that when anything with a class of 'tab'
// is clicked, this function is run.
jQuery('.tab').click(function () {
 
  // Remove the 'active' class from the active tab.
  jQuery('#tabs_container > .tabs > li.active')
      .removeClass('active');
     
  // Add the 'active' class to the clicked tab.
  jQuery(this).parent().addClass('active');
 
  // Remove the 'tab_contents_active' class from the visible tab contents.
  jQuery('#tabs_container > .tab_contents_container > div.tab_contents_active')
      .removeClass('tab_contents_active');
 
  // Add the 'tab_contents_active' class to the associated tab contents.
  jQuery(this.rel).addClass('tab_contents_active');
 
});
});

    <style type="text/css" >
 
#tabs_container {
    width: 50%;
    font-family: Arial, Helvetica, sans-serif;
    float:left;
    font-size: 12px;
}
#tabs_container ul.tabs {
    list-style: none;
    border-bottom: 1px solid #ccc;
    height: 21px;
    margin: 0;
}
#tabs_container ul.tabs li {
    float: left;
}
#tabs_container ul.tabs li a {
    padding: 0px 10px;
    display: block;
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    margin-right: 2px;
    text-decoration: none;
    background-color: #efefef;
}
#tabs_container ul.tabs li.active a {
    background-color: #fff;
}
div.tab_contents_container {
    border: 1px solid #ccc;
    border-top: none;
    padding: 10px;
}
div.tab_contents {
    display: none;
}
div.tab_contents_active {
    display: block;
}
 
#divall {
    width:100%;
    display:table;
}
    </style>
    <!-- This is the box that all of the tabs and contents of
        the tabs will reside -->
    <div id="tabs_container">
 
      <!-- These are the tabs -->
      <ul class="tabs">
        <li class="active">
          <a href="javascript:void(0);" rel="#tab_1_contents" class="tab">Tab 1</a>
        </li>
        <li><a href="javascript:void(0);" rel="#tab_2_contents" class="tab">Tab 2</a></li>
        <li><a href="javascript:void(0);" rel="#tab_3_contents" class="tab">Tab 3</a></li>
      </ul>
 
      <!-- This is used so the contents don't appear to the right of the tabs -->
      <div class="clear"></div>
 
      <!-- This is a div that hold all the tabbed contents -->
      <div class="tab_contents_container">
 
        <!-- Tab 1 Contents -->
        <div id="tab_1_contents" class="tab_contents tab_contents_active">
Таб1
        </div>
 
        <!-- Tab 2 Contents -->
        <div id="tab_2_contents" class="tab_contents">
Таб2
        </div>
 
        <!-- Tab 3 Contents -->
        <div id="tab_3_contents" class="tab_contents">
Таб3
        </div>
 
      </div>
    </div>

 

[dino]

Проверил, при клике по табам, меняется соответственно содержимое контейнера под табами, больше ничего не меняется (собственно как и должно работать)...

При нажатии на на вкладку одного таба меняются все табы

Это как?

 

[r0nin]

То есть хочу сказать напимер есть таб Ajax с 3 вкладками - jquery(1), mootools(2) и scriptalocous(3). Справа расположен ещё один таб News с 3 другими вкладками - php(1),asp(2),perl(3). Так вот при нажатии на вкладку mootools(2) на первом табе, меняется и содержимое второго таба на asp(2). Вот так. То есть надо чтоб при нажатии на одну вкладку менялся контент только того таба, а не всех тех табов которые на странице. Вот так вот, сложновато вроде.