Question

我在内容中有两个标签： Comerciales - Legales

这些标签中的每一个都应显示文件列表，例如现在显示的文件。

我希望如果用户点击 Legales ，它会隐藏 Comerciales 标签的文件，并且标签变为活动状态（获取活动类并将其从< strong> 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>

Answer 1

看到这个小提琴：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的答案中的一些标签插件。

Answer 2

由于你还没有发布你的JS代码，我不知道你错在哪里：

我建议你可以使用jqueryui的标签：

http://jqueryui.com/tabs/

有许多示例演示了如何实现制表符。谷歌一下。

更多资源：

http://www.jacklmoore.com/notes/jquery-tabs

http://jqueryfordesigners.com/jquery-tabs/

http://www.apricot-studios.com/lab/jquery/jquery-tabs-tutorial.php

Answer 3

我愿意使用一些已经存在的插件而不是尝试这个插件，你可以轻松地按照自己想要的方式使用它，如果你想学习一些技巧，你也可以使用其中的代码。< / p>

希望它有所帮助。

jquery-content-panel-switcher

在不重新加载的情况下切换选项

3 个答案: