javascript - 无需重新加载即可在选项卡之间切换

Question

我在内容中有两个选项卡:Commerciales - Legales

这些选项卡中的每一个都应该显示一个文件列表，就像现在显示的一样。

我想做的是，如果用户点击 Legales，它会隐藏 Commerciales 选项卡的文件，并且该选项卡变为事件状态(获取事件类并将其从 < strong>Commerciales) 并仅显示属于 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>

Answer 1

请参阅此 fiddle :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>

法律内容(由相应的类标记)默认通过 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 的答案中的一些选项卡插件。