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

原文 标签 javascript jquery html slicknav

如名称所述,我有一个带有链接的菜单,并且我有一个要在单击菜单时显示/隐藏的部分列表。
我在这里想要的是动态的,如果我添加更多的菜单和部分,我不必更改执行它的代码,或者添加新的标签或名称。
我尝试自己做一些事情,但我可能错过了一些东西..
任何帮助将不胜感激

我在这个 jfiddle 上有一个简单的例子:https://jsfiddle.net/s07ysx6w/6/

HTML:

<div id="header">
   <div id="menuBlock">
    <ul id="menu">
      <li><a href="#novosti" name="sekcija1">Novosti</a></li>
      <li><a href="#programMladi" name="sekcija2">Program Mladi</a></li>
      <li><a href="#programOdrasli" name="sekcija3">Program Odrasli</a></li>
      <li><a href="#programUpisi" name="sekcija4">Program Upisi</a></li>
      <li><a href="#galerija" name="sekcija5">Galerija</a></li>
      <li><a href="#kontakt" name="sekcija6">Kontakt</a></li>
    </ul>
  </div>
</div>

<body>
  <div id="main">
    <div id="novosti" name="sekcija1" class="sekcija">
      aaaa
    </div>
    <div id="programMladi" name="sekcija2" class="sekcija">
      aaaa
    </div>
    <div id="programOdrasli" name="sekcija3" class="sekcija">
      aaaa
    </div>
    <div id="programUpisi" name="sekcija4" class="sekcija">
      aaa
    </div>
    <div id="galerija" name="sekcija5" class="sekcija">
      aaaa
    </div>
    <div id="kontakt" name="sekcija6" class="sekcija">
      aaa
    </div>
  </div>
</body>

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

编辑:
复制/粘贴让我粗心,所以现在只有唯一的 id。还用一个工作的(解决方案)替换了 fiddle 。

更新:
万一有人使用 slicknav 作为他/她页面上的插件,要访问菜单中的元素,您需要找到 slicknav 究竟是如何将其注入(inject)您的页面的。例如,在我的情况下,因为我将它添加到我的 #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');


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

或者只是选定的一个(因为它已经指向一个特定的元素)
$(selected).show('slow').siblings().hide('slow');

检查此更新 fiddle
$(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
    });
});

关于javascript - 仅显示单击链接的内容并隐藏所有同级,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35796319/

相关文章:

html - 包含文本和图像时的Flexbox格式问题

javascript - 访问JSON中的属性(对象)

javascript - AngularJS日期过滤器不产生结果

jquery - 从一个列表中拖放 jQuery UI 可拖动元素并将其放入另一个列表的问题

jquery - 如何使用 CSS 代码替换新 Twitter 小部件中的 100% 宽度?

javascript - 如何在自动完成中制作过渡效果(幻灯片)

javascript - 比较忽略特殊字符“ä”的javascript字符串

javascript - AngularJs $ invalid在这种情况下不起作用

javascript - 带有jQuery的音频html5播放下一首轨道

html - 背景图像 :no-repeat not working, 语法正确