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

Тема в разделе "JavaScript", создана пользователем r0nin, 9 фев 2012.

Модераторы: ZiX
  1. r0nin

    r0nin Постоялец

    Регистр.:
    12 апр 2010
    Сообщения:
    80
    Симпатии:
    4
    Здрасте всем. Натолкнулся на следующий случай.
    На странице должно быть несколько табов. При нажатии на на вкладку одного таба меняются все табы. Как задать это отдельно для каждого таба.
    Вот коды:
    Код:
    // 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');
     
    });
    });
    PHP:
        <style type="text/css" >
     
    #tabs_container {
        
    width50%;
        
    font-familyArialHelveticasans-serif;
        
    float:left;
        
    font-size12px;
    }
    #tabs_container ul.tabs {
        
    list-stylenone;
        
    border-bottom1px solid #ccc;
        
    height21px;
        
    margin0;
    }
    #tabs_container ul.tabs li {
        
    floatleft;
    }
    #tabs_container ul.tabs li a {
        
    padding0px 10px;
        
    displayblock;
        
    border-left1px solid #ccc;
        
    border-top1px solid #ccc;
        
    border-right1px solid #ccc;
        
    margin-right2px;
        
    text-decorationnone;
        
    background-color#efefef;
    }
    #tabs_container ul.tabs li.active a {
        
    background-color#fff;
    }
    div.tab_contents_container {
        
    border1px solid #ccc;
        
    border-topnone;
        
    padding10px;
    }
    div.tab_contents {
        
    displaynone;
    }
    div.tab_contents_active {
        
    displayblock;
    }
     
    #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>
     
  2. dino

    dino

    Регистр.:
    28 май 2009
    Сообщения:
    550
    Симпатии:
    204
    Проверил, при клике по табам, меняется соответственно содержимое контейнера под табами, больше ничего не меняется (собственно как и должно работать)...

    Это как?
     
    r0nin нравится это.
  3. r0nin

    r0nin Постоялец

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