頁面上的多個選項卡組 - CSS/jQuery

我知道此主題以前已被問過，但通過帖子查看並不是我正在尋找的內容，所以請耐心等待一分鐘。頁面上的多個選項卡組 - CSS/jQuery

第一，這裏是我小的jQuery（完美的作品）

$(document).ready(function(){ 
    $(".tabs li").click(function() { 
     $(".tab-content").hide(); 
     var selected_tab = $(this).find("a").attr("href"); 
     $(selected_tab).fadeIn(); 
     $(".tabs li").removeClass('current'); 
     $(this).addClass("current"); 
     return false; 
    }); 
});

我的基本的HTML

<ul class="tabs"> 
    <li class="active"><a href="#tab4">Tab 4</a></li> 
    <li><a href="#tab5"><div class="alert-icon">Tab 5</div></a></li> 
    <li><a href="#tab6"><div class="printer-icon">Tab 6</div></a></li> 
</ul> 

<div id="tab4" class="tab-content">Tab 4</div> 
<div id="tab5" class="tab-content">Tab 5 </div> 
<div id="tab6" class="tab-content">Tab 6 </div>

當然，如果我把超過1個部分的頁面上，每次一個標籤被點擊所有選項卡的內容將「隱藏」，我需要使每個選項卡部分獨立運行。

我的問題是我想避免使用ID路由，理想情況下我可以將JS權限放入模板中，每當有人需要標籤區域時，他們可以粘貼HTML，也可以向UL添加ID並填充在空白處。

選項卡和它們的內容將被其他不是非常石頭的人放進去，所以如果我可以避免讓他們使用JS，生活將會是美好的！

我想過玩過濾器，替換字符串，子元素（把div放在LIs裏嗎？）等等，但是在沒有我的鴨子漂浮的情況下潛入陌生的海洋之前，我認爲這裏的一個優點可以給我一個提示並指向正確的方向。 js/jQuery從來不是我最喜歡的^^。

非常感謝！

來源

2013-02-12 Ionko Gueorguiev

這應該做的伎倆：http://jsfiddle.net/BLGUW/

HTML：

<div class="tabs"> 
     <ul> 
      <li class="active"><a href="#tab4">Tab 4</a></li> 
     <li><a href="#tab5"><div class="alert-icon">Tab 5</div></a></li> 
     <li><a href="#tab6"><div class="printer-icon">Tab 6</div></a></li> 
    </ul> 
    <div id="tab4" class="tab-content">Tab 4</div> 
    <div id="tab5" class="tab-content">Tab 5 </div> 
    <div id="tab6" class="tab-content">Tab 6 </div> 
</div> 

<div class="tabs"> 
    <ul> 
    <li class="active"><a href="#tab40">Tab 4</a></li> 
    <li><a href="#tab50"><div class="alert-icon">Tab 5</div></a></li> 
    <li><a href="#tab60"><div class="printer-icon">Tab 6</div></a></li> 
    </ul> 
    <div id="tab40" class="tab-content">Tab 4</div> 
    <div id="tab50" class="tab-content">Tab 5 </div> 
    <div id="tab60" class="tab-content">Tab 6 </div> 
</div>

$(document).ready(function(){ 
    $(".tabs li").click(function() { 
     $(this).parent().parent().find(".tab-content").hide(); 
     var selected_tab = $(this).find("a").attr("href"); 
     $(selected_tab).fadeIn(); 
     $(this).parent().find("li").removeClass('current'); 
     $(this).addClass("current"); 
     return false; 
    }); 
});

我敢肯定，這可以優化;）

來源

2013-02-12 16:27:36 Fab

我不知道關於優化，但它確實是我正在尋找的！謝謝，你是一個救星！ – 2013-02-12 16:55:36

頁面上的多個選項卡組 - CSS/jQuery

回答

相關問題