logo标签列表

不重新加载页面的情况下切换标签页

javascriptjqueryhtmlcssajax
3
我在内容中有两个选项卡：商业 - 法律 每个选项卡都应该显示文件列表，就像现在显示的那些一样。
我想要实现的是，如果用户点击法律，它会隐藏商业选项卡下的文件并将该选项卡变为活动状态（获取活动类并从商业移除它），仅显示属于法律的文件。
我尝试过使用hide和fade in，但无法获取当前选项卡的活动类。有人能帮我吗？
以下是我的标记：
        <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>
1
你可以使用jQuery函数：addClass + removeClass或toggleClass..来将活动类从正确的选项卡中删除和添加。 - Jozzeh
3个回答
3

查看这个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回答中的一些选项卡插件。
1
1
如果您愿意使用一些已经存在的插件，那么可以尝试这个。您可以轻松地让它按照您想要的方式工作，如果您想学习技巧，还可以在其中玩弄代码。
希望能有所帮助。 jquery-content-panel-switcher
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接