jquery，選項卡，激活li上的活動類

<script type="text/javascript"> 

$(document).ready(function() { 

    //Default Action 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li: #tab2").addClass("active").show(); //Activate first tab 
    $(".tab_content:#tab2").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 rel attribute value to identify the active tab + content 
     $(activeTab).show(); //Fade in the active content 
     return false; 
    }); 

}); 
</script>

我一直在試圖做到這一點，目前當我打開頁面選項卡的第二個div被選中，但行沒有突出顯示。任何意見將不勝感激。謝謝jquery，選項卡，激活li上的活動類

來源

2011-03-20 user660943

首先，它看起來像你有2個DOM節點具有相同的id屬性 - 「tab2」 - 你不應該這樣做。 ID是唯一的，所以很有可能不是所有的瀏覽器都會找到第二個（如果它們是單獨的節點）。我敢肯定，這基本上是你在做什麼，而不是：

$("#tab2").addClass("active").show(); //Activate first tab 
$("#tab2").show(); //Show first tab content

（除非通過jQuery的一個id屬性的每一個節點實際上看起來而不是簡單地使用document.getElementById的場面，這我很懷疑背後）。

如果你想找出某種類或選擇後面的節點，我會建議使用類，而不是通過改變標記來

<tag class="tab2"> 
<!-- I don't know which kind of tag #tab2 was supposed to point at -->

，並使用一個略有不同的選擇找到它，像

$('ul.tabs .tab2')

其次，你得到<a>標籤的屬性（在href屬性）在該選項卡中，而不是<a>標籤本身（所以$(this).find("a").attr("href")返回一個String，可能不是你想要的，因爲$.show期望DOM節點，選擇器（作爲String）或jQuery集）。所以，我會改變這一點：

var activeTab = $(this).find("a").attr("href"); 
$(activeTab).show(); //Fade in the active content

喜歡的東西：

var activeTab = $(this).find("a"); 
$(activeTab).show(); // might want to wrap this with if (activeTab.length > 0) 
         // but I can't remember what happens if you try to .show() 
         // something that isn't there

如果你想顯示在活動選項卡<a>標籤。

http://api.jquery.com/show/
http://css-tricks.com/the-difference-between-id-and-class/

來源

2011-03-20 02:43:06

jquery，選項卡，激活li上的活動類

回答

相關問題