래퍼/컨테이너 div가없는 jQuery 탭

Question

각 에디터 상자에 char이있는 컨텐츠 관리 시스템에이를 추가해야합니다. 제한이 4000입니다. 모든 콘텐츠 div를 안에 넣을 수는 없으므로 각 탭 콘텐츠 div를 별도의 편집기 상자에 넣어야합니다. 그래서 wrapper div를 제거해야합니다.

$(function() { 
    var tabContainers = $('div.tabs > div'); 

    $('div.tabs ul.nav a').click(function() { 
    tabContainers.hide().filter(this.hash).show(); 

    $('div.tabs ul.nav a').removeClass('selected'); 
    $(this).addClass('selected'); 

    return false; 
    }).filter(':first').click(); 
}); 

---

내 생각은 각 공통 클래스 "시리즈 1"을 추가했다 :

<div class="tabs"> 
    <ul class="nav"> 
    <li><a href="#t1">one</a></li> 
    <li><a href="#t2">two</a></li> 
    <li><a href="#t3">three</a></li> 
    </ul> 

    <div id="t1">a lot of content</div> 
    <div id="t2">a lot of content</div> 
    <div id="t3">a lot of content</div> 
</div> 

jQuery 코드 :

나는 래퍼 DIV "탭"다음과 같은 탭 스크립트가 동일한 효과를 보관하기 위해 내 콘텐츠를 삭제하지만 작동하지 않습니다. (jquery noob)

<ul class="nav"> 
    <li><a href="#t1">one</a></li> 
    <li><a href="#t2">two</a></li> 
    <li><a href="#t3">three</a></li> 
    </ul> 

    <div id="t1" class="series1">content</div> 
    <div id="t2" class="series1">content</div> 
    <div id="t3" class="series1">content</div> 

,363,210

---

$(function() { 
    var tabContainers = $('div.series1'); 

    $('ul.nav a').click(function() { 
    tabContainers.hide().filter(this.hash).show(); 

    $('ul.nav a').removeClass('selected'); 
    $(this).addClass('selected'); 

    return false; 
    }).filter(':first').click(); 
}); 

내가 수동으로 jQuery를에 개별 ID/클래스의 이름을 언급해야하는 경우 그것은 중요하지 않습니다

, 누군가가이 일을하는 데 도움이 수 있을까?

감사합니다.

Answer 1

이러한 유형의 기능은 .tabs()이없는 jQuery에서 구현하기가 쉽습니다. 몇 가지 아이디어를 보려면 this fiddle을 살펴보십시오.