ラッパー/コンテナdivのないjQueryタブ

Question

各エディターボックスにcharがあるコンテンツ管理システムでこれを追加する必要があります。私はすべてのコンテンツdivを内側に収めることができません、私は別のエディタボックスに各タブのコンテンツdivを配置する必要があります。だから私はラッパー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 "タブの" WITH以下のタブのスクリプトを持っています同じ効果をアーカイブするために自分のコンテンツを削除しましたが、うまくいきません：（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> 

---

$(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をご覧ください。