javascript - 在标签之间切换而无需重新加载

Question

我在内容中有两个标签：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 的回答中的一些标签插件。