使用中
香草JS -DEMO

var menuItems = document.querySelectorAll(".nav a"); // Get all matching selectors; same as SizzleJS $(selector) 
 
for(var i=0; i < menuItems.length; i++){ // Loop through each element and add click event listener 

         menuItems[i].addEventListener('click', function(event){ // adding event listener.
           event.preventDefault();
           for(var i=0; i < menuItems.length; i++){
              menuItems[i].parentElement.className = ''; // remove current `active` class from parent element `li`. This is not the best approach for removing classes in Vanilla JavaScript; see this answer http://stackoverflow.com/a/2155786/2151050
           }
           this.parentElement.className = 'active'; // add `active` to current clicked element.
         }, false);

}

我不会强迫您使用jQuery，但是您应该考虑使用它来做更多的事情，编写更少的代码。
查询-DEMO

var menuItems = $(".nav a");
$(".nav a").on('click', function(event) {
    event.preventDefault();
    menuItems.parent().removeClass('active');
    $(this).parent().addClass('active');
});

获取nav节点列表的第一个元素：

let menuClick = document.getElementsByClassName("nav")[0];

附加事件侦听器（注意：changeActive而不是changeActive()）。这将使用事件委派来捕获从锚点冒泡的事件。

menuClick.addEventListener('click', changeActive, false);

现在向函数添加一些代码：

function changeActive(e){

  // grab the element that's active
  let active = this.querySelector('li.active');

  // remove the class
  active.classList.remove('active');

  // add the active class to the parent of the clicked anchor
  e.target.parentNode.classList.add('active');
}

DEMO

有许多方法可以做到这一点：
1.您可以使用onhashchange来检测散列更改
如果是第一页，那么函数的作用是：如果是第二页，那么函数的作用是：如果是第一页，那么函数的作用是：如果是第二页，那么函数的作用是：
1.或者简单地将click事件绑定到菜单项
于飞：

<ul class="nav navbar-nav navbar-right">
      <li class="active"><a href="#pageOne">Home</a></li>
      <li><a href="#pageTwo">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
</ul>

JS：

var navs = document.querySelectorAll('.nav a');
navs.click = function (e) {
  document.querySelector('active').className.replace('active','');
  var target = e.target;
  taret.className += ' active';
};

注意，你必须循环以向菜单中的所有对象添加一个单击处理程序。
下面是一个片段
第一个