jquery - Jqueryツールタブのカスタマイズ

Question

私も同じようにやりたいです。

jquery（http://flowplayer.org/tools/demos/tabs/skins.html）を使用してタブを簡単に作成できますが、タブコンテンツplace.plsにデフォルトのコンテンツを表示する方法がわかりません。正確に欲しい。

誰か助けて、やるべきアイデアを与えてください。

Answer 1

ここでフィドルを作成しました：http： //jsfiddle.net/garreh/cfmvE/

あなたが正しい方向に始める必要があります。jQuery UIタブを使用したい場合は、インターネット上の数百万の例を見てください。しかし、あなたがやろうとしていることは非常に単純であり、付属のフィドルで簡単に達成することができます。コードにajaxを追加するのは非常に簡単です。

<div id="tab_container">
    <div class="tab_content tab_1 tab_active">
        What's your name?<br/><br/>
        <input type="text"/>
    </div>
    <div class="tab_content tab_2">
        Some other question
    </div>
    <div class="tab_content tab_3">
        A final question blah
    </div>        
</div>

<div id="tabs">
    <a href="#" tab="1">Question 1</a>
    <a href="#" tab="2">Question 2</a>
    <a href="#" tab="3">Question 3</a>
</div>

jQuery：

$('#tabs > a').click(function() {
    var $tab = $('.tab_' + $(this).attr('tab'));
    if ($tab.length)
    {
        // Hide active tab & selected style:
        $('.tab_active').removeClass('tab_active');
        $('#tabs .active').removeClass('active');

        // Show clicked tab content
        $tab.addClass('tab_active');

        // Set tab styling
        $(this).addClass('active');
    }
});

フィドルで利用可能なCSS。

---

編集：

これは、ハイパーリンクアンカートリックを使用してHTMLのみを使用するタブを示す別のフィドルです。Javascriptは必要ありません：http：//jsfiddle.net/garreh/6e2w5/