Javascript 仅显示单击链接中的内容并隐藏所有同级

如名称中所述，我有一个带有链接的菜单，我有一个要在单击菜单时显示/隐藏的部分列表。 这里我想要的是动态的，如果我添加了更多的菜单和部分，我就不必更改代码，也不必添加新的标记或名称。 我试着自己做一些事情，但我可能错过了一些。。 任何援助都将被告知

关于这个jfiddle，我有一个简单的例子：

HTML:

编辑： 复制/粘贴让我很粗心，所以现在只有唯一的id。还将小提琴更换为工作小提琴（解决方案）

更新： 如果有人在他/她的页面上使用slicknav作为插件，要访问菜单中的元素，您需要找到slicknav是如何准确地将其注入页面的。例如，在我的例子中，因为我在

#menuBlock

div标记前面加了它。为了找到元素

#novosti

，我必须深入挖掘，因为slicknav自己创建标记，以便按照它的方式工作

在这种情况下，我的javascript看起来像这样

$(document).ready(function(){
    $("#menuBlock div ul li a").click(function (e){
        e.preventDefault();
        var selected = $(this).attr('href');
        $( selected ).fadeIn('slow').siblings().hide();
        });
    });

---

如果两个选择器之间存在父子关系，则它们之间应该有一个空格，因此请更改此行

$('#main' + selected).show('slow').siblings().hide('slow');

到

或者只选择一个（因为它已经指向特定的元素）

检查此更新

---

在代码中发现多个错误

设置Jquery库

Id

在整个DOM中应该是唯一的

将

this.attr

替换为

$（this.attr（）

后代选择器应该是

#菜单#某物

而不是

#菜单#某物

在开始新的动画之前，应该

.stop（）

动画

试试看

试试这个方法

$(document).ready(function() {
  $("#menu a").click(function(e) {
    debugger;
    var selected = $(this).attr('name');
    $('#main div').hide(); 
    $('#main div[name="'+selected+'"]').show('slow');
  });
});

---

一个页面上不应该有多个具有相同ID的元素，因此请将页面上的ID更改为更具体的ID。还是我错了？根据你的问题，你想要更具可扩展性的东西，这里有一个方法

$(document).ready(function(){
  $("#menu").click(function (e){

    var element = $(e.target).attr('href');

    $('#main-divs > ' + element).show('slow').siblings().hide('slow');
  });
});

---

谢谢大家。谢谢你告诉我我犯的错误。但现在我有另一个问题。它在fiddle上运行得很好，但是当我在本地页面上实现它时，它似乎除了移动到href位置之外什么都不做。我也在使用slicknav插件，可能是它导致了一些问题？上传整个自动取款机有点乏味，但我会在晚上做，或者我是否应该对此提出一个完全不同的问题，因为任何想用slicknav做类似事情的人都可能会问。谢谢你提供的信息。我添加了一个更新，你能对此发表评论吗？有没有比我更简单的方法？如果我想更改尽可能少的代码，但只是在同一页面上添加内容，那么这是正确的方法吗？谢谢你告诉我我的错误。复制/粘贴使我匆忙，错过了其中的一些。你的答案和@gurvinder372答案有什么区别？我看他只在最后一部分用了“选定的”。

$('#main ' + selected).show('slow').siblings().hide('slow');

$(selected).show('slow').siblings().hide('slow');

$(document).ready(function(){
    $("#menu li a").click(function (e){ //bind the event on `a` rather than ul
        var selected = $(this).attr('href'); //use $(this) instead of this
        $( selected ).show('slow').siblings().hide('slow'); //explained above
    });
});

$(document).ready(function() {
  $("#menu li a").click(function(e) {
    e.preventDefault()
    var selected = $(this).attr('href');
    $('#main ' + selected).stop().show('slow').siblings().hide('slow');
  });
});

$(document).ready(function() {
  $("#menu a").click(function(e) {
    debugger;
    var selected = $(this).attr('name');
    $('#main div').hide(); 
    $('#main div[name="'+selected+'"]').show('slow');
  });
});

$(document).ready(function(){
  $("#menu").click(function (e){

    var element = $(e.target).attr('href');

    $('#main-divs > ' + element).show('slow').siblings().hide('slow');
  });
});