菜單點擊功能第一次不起作用

Question

當菜單項被點擊後，下一個功能不起作用。它位於</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>

Answer 1

如果您想從其他項目中刪除類「當前」，並把它添加到點擊的項目，你可以做這樣的：

PS：別t忘記在腳本之前包含'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>

Answer 2

經您的document.ready

<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>