3

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

我在这个 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。还用一个工作的（解决方案）替换了小提琴。

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

4 回答 4

2

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

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

到

$('#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
    });
});
于 2016-03-04T12:43:53.450 回答
2

在您的代码中发现了不止一个错误，

  1. 设置一个 Jquery 库
  2. Id应该unique贯穿整个 DOM
  3. 替换this.attr为$(this).attr()
  4. 后代选择器#menu #something不会#menu#something
  5. 在开始新的动画之前应该.stop()有一个动画。

尝试，

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

演示

于 2016-03-04T12:44:23.173 回答
1

试试这个方法

$(document).ready(function() {
  $("#menu a").click(function(e) {
    debugger;
    var selected = $(this).attr('name');
    $('#main div').hide(); 
    $('#main div[name="'+selected+'"]').show('slow');
  });
});
于 2016-03-04T12:46:27.627 回答
1

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

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

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

    $('#main-divs > ' + element).show('slow').siblings().hide('slow');
  });
});
于 2016-03-04T13:20:46.970 回答