3

一連のリンクとdivの数を持つナビゲーションスキームを作成しようとしています。リンク1をクリックすると、div 1が表示されます。リンク2をクリックすると、1を非表示にして、2を表示します。

次のコードを動作させることができました。ただし、ページ上の他のリンクをクリックすると、現在表示されているdivが消えたり非表示になったりします。

私はさまざまな解決策を試しましたが、これを理解することができませんでした。誰かが以下のコードに基づいて何が起こっているのかについていくつかの洞察を提供できますか？

HTML：

    <ul id="navigation">
        <li data-tab="property" class="activeitem settingLink active"><a href="#">Property Flyers</a></li>
        <li data-tab="openhouse" class="settingLink"><a href="#">Open House Flyers</a></li>
        <li data-tab="postcards" class="settingLink"><a href="#">Postcards</a></li>
        <li data-tab="mortgage" class="settingLink"><a href="#">Mortgage Flyers</a></li>
        <li data-tab="recruiting" class="settingLink"><a href="#">Recruiting Flyers</a></li>
    </ul>


    <div id="property" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
    <div id="openhouse" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
    <div id="Postcards" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
    <div id="Mortgage" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>
    <div id="Recruiting" class="span-18 last"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" /></div>

JavaScript：

$('a').on('click', function(e) {
    e.preventDefault();
    var $li = $(this).closest('li');

    var tab = $li.data('tab');
    var current = $('.active.settingLink').data('tab');

    $('#' + current).fadeOut('fast', function() {
        //Slide the new div down
        $('#' + tab).fadeIn();
    });

    //Remove active class from current link
    $('.active.settingLink').removeClass('active');

    $li.addClass('active');
});
4

4 に答える 4

2

$('a')ページ内のすべての<a>タグをターゲットにするには、より具体的なセレクターが必要です。

$("#navigation a');
于 2013-02-03T14:02:43.380 に答える
1

例: http://jsfiddle.net/9UPQj/

<ul id="navigation">
        <li data-tab="property" class="activeitem settingLink active"><a href="#">Property Flyers</a></li>
        <li data-tab="openhouse" class="settingLink"><a href="#">Open House Flyers</a></li>
        <li data-tab="postcards" class="settingLink"><a href="#">Postcards</a></li>
        <li data-tab="mortgage" class="settingLink"><a href="#">Mortgage Flyers</a></li>
        <li data-tab="recruiting" class="settingLink"><a href="#">Recruiting Flyers</a></li>
    </ul>


    <div id="property" class="span-18 last" rel="1"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" />1st</div>
    <div id="openhouse" class="span-18 last" rel="2"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" />2nd</div>
    <div id="Postcards" class="span-18 last" rel="3"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" />3rd</div>
    <div id="Mortgage" class="span-18 last" rel="4"><img src="images/templates/thumbs/property84.jpg" width="143" height="194" />4th</div>

JS:

$('#navigation a').on('click', function(e) {
    e.preventDefault();
    var index = $('a').index(this) + 1;

    $('div').each(function(){

        if($(this).attr('rel') == index){
            $(this).addClass('active');
            $(this).show();
        }else{
            $(this).removeClass('active');
            $(this).hide();
        }
    });

});
于 2013-02-03T14:18:04.040 に答える
1 
$("#navigation a").on(...

クリック イベントをナビゲーション リンクだけにバインドするのはまさにその通りです。あなたのコードは、このイベントをドキュメント本文で見つかるすべてのリンクにバインドしているため、より正確なセレクターが必要です

注意：委任する必要があります

于 2013-02-03T14:02:27.267 に答える
0

これを試して

http://jsfiddle.net/6QJJp/1/

これがあなたに必要なものだと思います

要件に応じて修正する必要がありCSSます。

于 2013-02-03T14:09:05.140 に答える