多個選項卡在一個頁面使用jQuery的Css

Question

我有這個jQuery方法的兩個問題：

1-在CSS懸停和活動不會改變鏈接的顏色！ Gallery或Submit點擊後

2 - 在TAB3或TAB4（ID 3- ID 4）隱藏tabcontent爲ID 1.

<div><ul class="tabs"> 
    <li><a href="#tab1">Gallery</a></li> 
    <li><a href="#tab2">Submit</a></li> 
    </ul> 

    <div class="tab_container"> 
     <div id="tab1" class="tab_content"> 
      <!--Content--> 
     </div> 
     <div id="tab2" class="tab_content"> 
      <!--Content--> 
     </div> 
    </div></div> 
<div> 
    <ul class="tabs"> 
     <li><a href="#tab3">Gallery</a></li> 
     <li><a href="#tab4">Submit</a></li> 
    </ul> 

    <div class="tab_container"> 
     <div id="tab3" class="tab_content"> 
      <!--Content--> 
     </div> 
     <div id="tab4" class="tab_content"> 
      <!--Content--> 
     </div> 
    </div> 
</div> 

$(document).ready(function() { 

    //When page loads... 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 
    //On Click Event 
    $("ul.tabs li").click(function() { 

     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 
     var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active ID content 
     return false; 
    }); 

}); 

ul.tabs { 
    margin: 0; 
    padding: 0; 
    float: left; 
    list-style: none; 
    height: 32px; /*--Set height of tabs--*/ 
    border-bottom: 1px solid #999; 
    border-left: 1px solid #999; 
    width: 100%; 
} 
ul.tabs li { 
    float: left; 
    margin: 0; 
    padding: 0; 
    height: 31px; /*--Subtract 1px from the height of the unordered list--*/ 
    line-height: 31px; /*--Vertically aligns the text within the tab--*/ 
    border: 1px solid #999; 
    border-left: none; 
    margin-bottom: -1px; /*--Pull the list item down 1px--*/ 
    overflow: hidden; 
    position: relative; 
    background: #e0e0e0; 
} 
ul.tabs li a { 
    text-decoration: none; 
    color: #000; 
    display: block; 
    font-size: 1.2em; 
    padding: 0 20px; 
    border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/ 
    outline: none; 
} 
ul.tabs li a:hover { 
    background: #ccc; 
} 
html ul.tabs li.active, html ul.tabs li.active a:hover { /*--Makes sure that the active tab does not listen to the hover properties--*/ 
    background: #fff; 
    border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/ 
} 
.tab_container { 
    border: 1px solid #999; 
    border-top: none; 
    overflow: hidden; 
    clear: both; 
    float: left; width: 100%; 
    background: #fff; 
} 
.tab_content { 
    padding: 20px; 
    font-size: 1.2em; 
} 

如何解決這個問題！ LIVE Action Demo

Answer 1

按類隱藏元素。無論選項卡設置如何，$(".tab_content").hide()都會隱藏您的所有內容元素。

你應該包裝你的標籤和它的內容區域，並選擇相對於該包裝元素的元素。

UPDATE

爲您推薦的短demo。

$(".myTabs").each(function() { 

    var $myTabs = $(this); 

    $myTabs.find(".tab_content").hide().first().show(); 
    $myTabs.find("ul.tabs li:first").addClass("active").show(); 

    $myTabs.find("ul.tabs li").click(function() { 
     var $this = $(this); 

     $this.addClass("active").siblings().removeClass("active"); 
     $myTabs.find(".tab_content").hide(); 

     var activeTab = $this.find("a").attr("href"); 
     $(activeTab).fadeIn(); 

     return false; 
    }); 
}); 

Answer 2

正確答案是這樣的：

$(document).ready(function() { 

$(".myTabs").each(function() { 

    var $myTabs = $(this); 

    $myTabs.find(".tab_content").hide().first().show(); 
    $myTabs.find("ul.tabs li:first").addClass("active").show(); 

    $myTabs.find("ul.tabs li").click(function() { 
     var $this = $(this); 

     $this.addClass("active").siblings().removeClass("active"); 
     $myTabs.find(".tab_content").hide(); 

     var activeTab = $this.find("a").attr("href"); 
     $(activeTab).fadeIn(); 

     return false; 
    }); 
}); 

}）;