0

1 つの項目をクリックすると、特定のクラスの 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();
    });

スクリプトの問題は、すべての div クラスを非表示にするように記述してスクリプトをかなり大きくするのではなく、1 つの div クラスをフェードインして他のアイテムを非表示にすることを指摘するだけの簡単な方法であるべきだと思うことです。

それを簡素化する方法についてのアイデアはありますか？

4

2 に答える 2

1

あなたのliクラスに従ってあなたの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/

于 2012-11-12T18:52:51.067 に答える
0

同じ機能を持っているように見えるので、すべてのイベントハンドラーを1つのイベントにまとめることができます。

$('.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');
});
于 2012-11-12T18:49:47.703 に答える