如名称中所述,我有一个带有链接的菜单,并且我有一个部分列表,我想在单击菜单时显示/隐藏这些部分。 我在这里想要的是在某种意义上是动态的,如果我添加更多的菜单和部分,我不必更改执行它的代码,或添加新的标签或名称。 我尝试自己做一些事情,但我可能遗漏了一些东西.. 任何帮助将不胜感激
我有一个关于这个 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 - 仅显示来自点击链接的内容并隐藏所有 sibling ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35796319/