单击链接时显示一个div，同时用jquery隐藏其他div

我正在尝试创建一个具有一系列链接和div数量的导航方案。 当我点击链接1时我想显示div 1.如果我点击链接2我想隐藏1并显示2等。

我能够获得以下代码。 但是，正在发生的事情是当点击页面上的任何其他链接时，当前正在显示的div消失/隐藏。

我尝试了各种解决方案，但一直无法解决这个问题。 有人可以根据下面的代码提供一些有关可能发生的事情的见解。

HTML：

 
Property Flyers
 
Open House Flyers
 
Postcards
 
Mortgage Flyers
 
Recruiting Flyers
 
 
 
 
 
 
 

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')定位页面中的每个标签，您需要更具体的选择器：

 $("#navigation a'); 

Answer 2

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

将点击事件仅绑定到您的导航链接是真的如此; 您的代码将此事件绑定到它将在文档正文中找到的所有链接，因此您只需要一个更精确的选择器

nb：你应该委托

Answer 3

示例： http ： //jsfiddle.net/9UPQj/

 
 
Property Flyers
 
Open House Flyers
 
Postcards
 
Mortgage Flyers
 
Recruiting Flyers
 
 
1st
 
2nd
 
3rd
 
4th 

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

Answer 4

试试这个

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

我想这就是你需要的

你需要根据你的要求修复CSS 。