탭을 만드는 데 방해가되지 않는 가장 간단한 jquery 솔루션은 무엇입니까?

Question

탭을 만드는 데 방해가되지 않는 가장 간단한 jquery 솔루션은 무엇입니까? Jquery가 jquery와 비슷하지만. jquery 사용자 탭이 좋지만 탭에 과도한 노출입니다. jquery UI core.js, jquery UI tab.js, 약간의 코드 스 니펫을 추가해야합니다.

가벼운 솔루션이 필요합니다. 이 유형의 HTML을 사용합니다. jquery 코드는 no.conflict 모드 여야합니다.

<ul> 
     <li><a href="#example-1">example 1</a></li> 
     <li><a href="#example-2">example 2</a></li> 
     <li><a href="#example-3">example 3</a></li> 
</ul> 
    <div id="tabs-1"> 
     <p> 
      tab 1 content</p> 
    </div> 
    <div id="tabs-2"> 
     <p> 
      tab 2 content</p> 
    </div> 
    <div id="tabs-3"> 
     <p> 
      tab 3 content</p> 
    </div> 

js가 비활성화 된 경우 탭 콘텐츠에 액세스 할 수 있어야합니다.

Answer 1

HTML을 변경하는 것이 옵션이라면 좀 더 의미가있는 것이 좋습니다. 탭에 대한 의미 론적 마크 업을 사용하면 검색 엔진 최적화가 향상되고 더 넓은 범위의 사용자가 사이트에 더 쉽게 액세스 할 수 있습니다. 즉, Semantic Tabs with jQuery은 아래 마크 업과 함께 사용할 수있는 훌륭한 플러그인입니다.

<div id="mytabset"> 
    <div class="panel"> 
    <h3>Tab1</h3> 
    Panel stuff 1 
    </div> 
    <div class="panel"> 
    <h3>Tab2</h3> 
    Panel stuff 2 
    </div> 
    <div class="panel"> 
    <h3>Tab3</h3> 
    Panel stuff 3 
    </div> 
</div> 

Answer 2

시맨틱 탭 상자 v2.0에 대한 Jitendra의 링크는 더 이상 실행 가능하지 않습니다. 그러나 기사는 Wayback Machine으로 계속 액세스 할 수 있습니다.

가장 최근 스냅 샷 : http://web.archive.org/web/20101022075840/http://blog.mozmonkey.com/2007/semantic-tab-box-v20/

직접 예제 소스 코드에 링크 : http://web.archive.org/web/20101022075840/http://blog.mozmonkey.com/pages/examples/tabbox2/tabbox2.zip

Answer 3

AccessibleTabs가 사랑스러운 눈에 거슬리지 탭 구현 - 너무 접근! 이

$(document).ready(function(){ 
     $(".tabs").accessibleTabs({ 
      tabhead:'h2', 
      fx:"fadeIn" 
     }); 
}); 

당신은 당신이 원하는 무엇이든 할 탭 라벨 및 콘텐츠를 보유하고있는 DOM 요소를 구성 할 수 있습니다처럼

그들의 간단한 예를 보인다. 여기 GitHub의에

: 여기에 https://github.com/ginader/Accessible-Tabs

더 자세히 : http://blog.ginader.de/archives/2009/02/07/jQuery-Accessible-Tabs-How-to-make-tabs-REALLY-accessible.php