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

Question

I have two tabs in the content: Comerciales - Legales

Each of these tabs should display a list of files, like the ones that are now displayed.

I want to make that if the user clicks on Legales it hides the files of Comerciales tab and the tab becomes active (getting the active class and removing it from Comerciales ) and displaying only the files that belong to Legales.

I have tried with hide and fade in but I couldn't get the active class to the current tab. Can someone help me out?

Here it's my markup:

        <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

See this fiddle: http://jsfiddle.net/MrZdh/

I've added some more classes to your markup so that it is easier to add jQuery handlers.

    <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 content (marked by corresponding class) is hidden via display:none by default.

Then tab click handlers can look like this:

    $('.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();
    });

Or yes, use some tabs plugin from kalpesh patel's answer.

Answer 2

As you have not posted your JS code, I don't know where you are wrong:

I would suggest that, you can use, jqueryui's tab:

http://jqueryui.com/tabs/

There are numerous example demonstrating how to implement tabs. Google it.

Few more resources:

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

I you are willing to use some already existing plug-in than try this one, you can easily get it working the way you want plus if you want to learn the tricks you can also play around with the code in it.

Hope it helps.

jquery-content-panel-switcher