javascript - リロードせずにタブを切り替える

Question

コンテンツには2つのタブがあります：Comerciales-Legales

これらの各タブには、現在表示されているファイルのようなファイルのリストが表示されます。

ユーザーがLegalesをクリックすると、 Comercialesタブのファイルが非表示になり、タブがアクティブになり（アクティブなクラスを取得してComercialesから削除）、Legalesに属するファイルのみが表示されるようにします。

非表示とフェードインを試しましたが、アクティブなクラスを現在のタブに移動できませんでした。誰かが私を助けることができますか？

これが私のマークアップです：

        <ul class="pdf_documents clearfix">
            <li class="active"><a href="javascript:void(0)">Comerciales</a></li>
            <li><a href="javascript:void(0)">Legales</a></li>
        </ul>
        <div class="pdf_box">
            <div class="pdf_file">
                <img src="images/pdf.png" alt="pdf" width="70" height="70">
                <p>Ficha Técnica</p>
            </div>
            <div class="pdf_file">
                <img src="images/pdf.png" alt="pdf" width="70" height="70">
                <p>Ficha Descriptiva</p>
            </div>
            <div class="pdf_file">
                <img src="images/pdf.png" alt="pdf" width="70" height="70">
                <p>Último informe</p>
            </div>
            <div class="pdf_file">
                <img src="images/pdf.png" alt="pdf" width="70" height="70">
                <p>Informes anteriores</p>
            </div>
            <div class="pdf_file">
                <img src="images/pdf.png" alt="pdf" width="70" height="70">
                <p>Folleto completo</p>
            </div>
        </div>

score 3 · Accepted Answer

このフィドルを参照してください: http://jsfiddle.net/MrZdh/

jQuery ハンドラーを簡単に追加できるように、いくつかのクラスをマークアップに追加しました。

    <ul class="pdf_documents clearfix">
        <li class="tab-com active"><a href="javascript:void(0)">Comerciales</a></li>
        <li class="tab-leg"><a href="javascript:void(0)">Legales</a></li>
    </ul>
    <div class="pdf_box">
        <div class="pdf_file comerciales">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Ficha Técnica</p>
        </div>
        <div class="pdf_file legales">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Ficha Descriptiva</p>
        </div>
        <div class="pdf_file comerciales">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Último informe</p>
        </div>
        <div class="pdf_file legales">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Informes anteriores</p>
        </div>
        <div class="pdf_file comerciales">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Folleto completo</p>
        </div>
    </div>

Legales コンテンツ (対応するクラスによってマークされている) は、デフォルトで display:none によって非表示になっています。

次に、タブクリックハンドラーは次のようになります。

    $('.tab-com a').click(function(e){
        //make all tabs inactive
        $('.pdf_documents a').removeClass('active');
        //then make the clicked tab active
        $(this).addClass('active');    
        $('.pdf_box .legales').hide();
        $('.pdf_box .comerciales').show();
    });


    $('.tab-leg a').click(function(e){
        //make all tabs inactive    
        $('.pdf_documents a').removeClass('active');
        //then make the clicked tab active
        $(this).addClass('active');
        $('.pdf_box .comerciales').hide();
        $('.pdf_box .legales').show();
    });

または、はい、kalpesh patelの回答からいくつかのタブプラグインを使用してください。