페이지의 여러 탭 그룹 - CSS/jQuery

Question

이 주제가 이전에 요청되었지만 게시물을 살펴 보는 것이 내가 찾던 내용이 아니므로 잠시 나와 함께하시기 바랍니다.

여기

$(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; 
    }); 
}); 

을 (완벽하게 작동) 그리고 페이지에 1 개 이상의 탭 섹션을 넣으면

<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> 

당연히 내 기본 HTML 내 작은 jQuery의 첫째, 모든 시간은 탭을 클릭 모든 탭의 내용이 "숨김"되며 각 탭 섹션을 독립적으로 작동하게해야합니다.

내 문제는 내가 ID 경로를 피하고 싶습니다. 이상적으로 템플릿에 JS 권한을 넣을 수 있으며 탭 영역이 필요할 때마다 HTML을 붙여 넣을 수 있고 UL에 ID를 추가하고 채울 수 있습니다. 공란에.

탭과 그 내용은 다른 사람들이별로 중요하지 않은 사람들이 넣을 것입니다. 따라서 JS를 사용하는 것을 피할 수 있다면 인생은 멋질 것입니다!

필자는 필터, 문자열 대체, 자식 요소 (LI에서 div를 넣는 것) 등을 생각했지만 어리석은 떠 다니는 플로트없이 생소한 바다로 뛰어 들기 전에 여기에서 전문가 중 한 명이 내게 힌트를 줄 수 있다고 생각했습니다. 그리고 올바른 방향으로 나를 가리켜 라. js/jQuery는 절대로 좋아하지 않았습니다 ^^.

고마워요!

Answer 1

이 트릭을 수행해야합니다 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> 

JS

$(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; 
    }); 
}); 

나는이 최적화 할 수 있습니다 확신)