當點擊鏈接時隱藏其他div與jquery顯示一個div當我點擊鏈接

Question

我想創建一個導航方案，有一系列的鏈接和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'); 
}); 

Answer 1

$('a')目標每<a>標籤，你需要更具體的選擇：

$("#navigation a'); 

Answer 2

$("#navigation a").on(... 

這就是它真的那麼點擊事件僅綁定您的導航鏈接;你的代碼是這個事件綁定到它會在文檔正文找到，所以你只需要一個更精確的選擇

NB所有鏈接：你應該委派頁

Answer 3

試試這個

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

我想這是你需要的東西

你需要根據你的需求修復CSS。

Answer 4

例子：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(); 
     } 
    }); 

});