0
我知道此主題以前已被問過,但通過帖子查看並不是我正在尋找的內容,所以請耐心等待一分鐘。頁面上的多個選項卡組 - 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 16:55:36