菜单点击功能第一次不起作用

时间:2017-08-10 09:26:58

标签: javascript jquery

单击菜单项时,下一个功能不起作用,但之后有效。它位于</body>标记之前。它将“当前”选择器放在所选菜单项中。知道为什么它第一次不起作用吗?

<script type = "text/javascript" >
  (function($, NAME) {
    var nav = $('ul#primary-menu');
    nav.find('a').on('click', function(e) {

      var $this = $(this),
        $targetContent;

      $this.closest('[id="primary-menu"]').find('a').removeClass('current');
      $this.addClass('current');

    });

  })(jQuery);

</script>

<ul id="primary-menu" class="main-nav underline-decoration l-to-r-line outside-item-remove-margin" role="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-39 first"><a href='#etusivu' data-level='1' class='menu-item'><span class="menu-item-text"><span class="menu-text">Etusivu</span></span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-47"><a href='#palvelut' data-level='1' class='menu-item'><span class="menu-item-text"><span class="menu-text">Palvelut</span></span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-48"><a href='#tuotteet' data-level='1' class='menu-item'><span class="menu-item-text"><span class="menu-text">Tuotteet</span></span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-49"><a href='#referenssit' data-level='1' class='menu-item'><span class="menu-item-text"><span class="menu-text">Referenssit</span></span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href='#ajankohtaista' data-level='1' class='menu-item'><span class="menu-item-text"><span class="menu-text">Ajankohtaista</span></span></a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href='#yhteystiedot' data-level='1' class='menu-item'><span class="menu-item-text"><span class="menu-text">Yhteystiedot</span></span></a></li> </ul>

2 个答案:

答案 0 :(得分:0)

如果您想从其他项目中删除“当前”课程并将其添加到点击的项目中,您可以这样做:

PS:不要忘记在脚本之前加入'jQuery'文件。

$(function () {

      var navItems = $('#primary-menu a');
      navItems.on('click', function(){

          navItems.removeClass('current'); // remove the class from all #primary-menu a items
          $(this).addClass('current'); // add the class to the clicked item


      });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="primary-menu">
      <li><a href="#">item 1</a></li>
      <li><a href="#">item 2</a></li>
      <li><a href="#">item 3</a></li>
  </ul>

答案 1 :(得分:0)

document.ready

中扭曲您的代码

&#13;
&#13;
<script type = "text/javascript" >
$(document).ready(function(){
  (function($, NAME) {
    var nav = $('ul#primary-menu');
    nav.find('a').on('click', function(e) {

      var $this = $(this),
        $targetContent;

      $this.closest('[id="primary-menu"]').find('a').removeClass('current');
      $this.addClass('current');

    });
})
  })(jQuery);

</script>
&#13;
&#13;
&#13;