Question

我正在尝试制作一个菜单，如果你单击一个项目，它会显示特定类的div并隐藏所有其他项目。

这就是我所做的：

    <ul class="pdf_documents clearfix">
        <li class="tab-periodicos active"><a href="javascript:void(0)">Informes periódicos</a></li>
        <li class="tab-folletos"><a href="javascript:void(0)">Folleto/DFI</a></li>
        <li class="tab-fichas"><a href="javascript:void(0)">Fichas</a></li>
        <li class="tab-accionistas"><a href="javascript:void(0)">Junta de accionistas</a></li>
        <li class="tab-otros"><a href="javascript:void(0)">Otros</a></li>
    </ul>

    <div class="pdf_box clearfix">
        <div class="pdf_file periodicos">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Último informe anual</p>
        </div>
        <div class="pdf_file periodicos">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Último informe semestral</p>
        </div>
        <div class="pdf_file periodicos">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Último informe trimestral</p>
        </div>
        <div class="pdf_file periodicos">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Penúltimo informe trimestral</p>
        </div>
        <div class="pdf_file folletos">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Folleto simplificado</p>
        </div>
        <div class="pdf_file folletos">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Folleto completo</p>
        </div>
        <div class="pdf_file fichas">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Ficha mensual</p>
        </div>
        <div class="pdf_file fichas">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Ficha comercial</p>
        </div>
        <div class="pdf_file accionistas">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Convocatoria</p>
        </div>
        <div class="pdf_file accionistas">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Propuestas</p>
        </div>
        <div class="pdf_file accionistas">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Informe técnico</p>
        </div>
        <div class="pdf_file otros">
            <img src="images/pdf.png" alt="pdf" width="70" height="70">
            <p>Otros</p>
        </div>
    </div>

CSS：

.pdf_box .folletos{ 
    display:none; 
}

这是我写的脚本：

    $('.tab-periodicos').click(function(e){
        $('.pdf_documents li').removeClass('active');
        $(this).addClass('active');    
        $('.pdf_box .folletos').hide();
        $('.pdf_box .periodicos').fadeIn();
    });
    $('.tab-folletos').click(function(e){
        $('.pdf_documents li').removeClass('active');
        $(this).addClass('active');
        $('.pdf_box .periodicos').hide();
        $('.pdf_box .folletos').fadeIn();
    });

脚本的问题在于我认为它应该是一个简单的方法，只需指出fadeIn一个div类并隐藏其他项，而不是编写每个div类来隐藏哪些使脚本变得非常大。

关于如何简化它的任何想法？

Answer 1

根据您的李班

获取您的div

$('.pdf_documents li').click(function(){
    $('li.active').removeClass('active'); // remove active class
    var c = $(this).attr('class').split('-')[1]; // used to get correct divs
    var $ele = $('.pdf_box div.'+c); // the divs you want
    $('.pdf_box div').not($ele).hide(); // hide all other divs
    $ele.show(); // show your divs
    $(this).addClass('active'); // add active to current li
});

http://jsfiddle.net/TWAK2/

Answer 2

您可以将所有事件处理程序组合成一个单独的事件，因为它们似乎具有相同的功能..

$('.tab-folletos , .tab-periodicos').click(function(e){

        var $this = $(this) ;
         // Remove active class for all li
        $('.pdf_documents li').removeClass('active');
        // Get the corresponding div class from li class
        var classID = $this.attr('class').split('-')[1] ;
        // Hide all children div inside pdf._box
        $('.pdf_box > div').hide();
        // Fade in the corresponding div 
        $('.pdf_box .' + classID).fadeIn();
        // Ass active class
        $this.addClass('active');
});

菜单淡入只有某个类的div并隐藏另一个div

2 个答案: