Jquery – 确定单击了哪个链接

我有几个类似的链接触发不同的导航div出现。 我试图在JQuery中找到一种方法来确定单击了哪个链接，然后触发相应的打开/关闭function。 html是：

   
nav links 1
 
nav links 2
 
nav links 3 

目前我使用分配给每对的简单切换，但是想要设置它，以便当有人打开隐藏的div然后单击另一个时，第一个将关闭。

添加…对于没有详细解释我的目标而道歉…导航菜单有三个项目需要在点击链接时更改。 链接本身将css从文本更改为活动“选项卡”，隐藏的导航在隐藏和显示之间切换，叠加div也在隐藏和显示之间切换。 当有人点击链接时，它应显示覆盖和隐藏的div并将链接css更改为活动状态。 如果他们再次点击该链接，则应切换回来。 这部分很容易做到。 挑战来了（对我来说最少）是如果他们有第一个隐藏打开然后点击第三个链接，我希望第一个隐藏关闭，其链接将css恢复正常，第三个隐藏打开，其链接更改为活跃，但我希望白色保持打开状态（不打开/关闭创建闪烁）。 …

我认为这可行，但唉没有运气：

 $("#nav1,#nav2,#nav3").click(function(e) { //determine nav id ... var nav_id = $(this).attr('id').match(/\d+/); }); 

最终计划是确定点击的导航链接，然后检查背景叠加是否可见。 如果没有，则打开导航链接配对的隐藏div和叠加层。 如果是这样，那么检查是否打开具有相同nav_id的隐藏div，如果是，则关闭所有内容，否则关闭所有隐藏的div并打开配对的隐藏div。

Answer 1

我将在这里讨论并建议不要连续编写适用于标记的代码，而是构建标记，以便代码自动运行。

您应该使用公共类而不是ID标记所有导航链接：

 Link 1 Link 2 Link 3 

和所有隐藏的div以类似的方式：

 
foo
 
bar
 
herp 

现在你的代码可以简单到：

 jQuery(function($) { var $navlinks = $('.navlink'), $navhiddens = $('.navhidden'), $overlay = $('#overlay'); $navlinks.on('click', function (e) { // this is your link $link = $(this); // get my hidden div + toggle $my_navhidden = $navhiddens .eq($navlinks.index(this)) .toggle(); // hide all the other navhiddens $navhiddens.not($my_navhidden).hide(); // hide or show the overlay? if ($navhiddens.filter(':visible').length > 0) { $overlay.show(); } else { $overlay.hide(); } }); }); 

这样做的好处是能够在您的标记上添加更多链接+ navhiddens，而无需更改代码中的任何内容。 另外，添加像.navhidden { display:none; } 在你的CSS中隐藏一切？

在添加新链接时，不要将$('#nav1,#nav2,#nav3')更改$('#nav1,#nav2,#nav3,#nav4') ，依此类推 ，请使用时间给自己一杯咖啡吧。 您可以使用Javascript / jQuery来确定元素的序数索引; 实际上没有必要使用nav1 nav2 nav3 … navn这样的序数序列来标记DOM元素。

另外， .on语法是jQuery 1.7.x. 如果您没有使用它，请将其更改为.bind 。

编辑

添加了一些代码，以逻辑方式打开和关闭叠加层。 它不是最优雅的，但你得到了要点。

Answer 2

你可以使用rel

HTML：

 Click me Click me Click me 
Foo
 
Foo
 
Foo 

JavaScript的：

 $('.expander').click(function(e) { $('#' + $(this).attr('rel')).toggle(); e.preventDefault(); return false; }); 

你可以使用.index（）如果你想知道被点击的ancho的相对位置，你需要包装锚点：

的jsfiddle

Answer 3

这个jsFiddle怎么样 ？

单击链接时，将显示相应的div，而隐藏所有其他div。

 $('#hidden1,#hidden2,#hidden3').hide(); $("#nav1,#nav2,#nav3").click(function(e) { e.preventDefault(); $('#hidden1,#hidden2,#hidden3').hide(); $('div:eq('+$(this).index()+')').show(); }); 

Answer 4

Andreas的建议是合理的 – rel属性对于这类事物非常有用，如果你能控制元素，那么它是正确的方法。

至于你的原始方法，它应该也可以工作（尽管有额外的正则表达式开销）。 请记住，匹配将返回一个数组或null。 如果你放弃空检查，你会使用类似的东西：

var nav_id = $(this).attr('id').match(/\d+/)[0];

还有一个提示：在jQuery选择器中指定元素类型是加快加载时间的好方法。 例如：$（’a＃nav1’）vs $（’＃nav1’），$（’a.expander’）vs $（’。expander’）