单页 Web 应用程序菜单选择答案

【问题标题】：Single Page Web-App Menu Selection单页 Web 应用程序菜单选择
【发布时间】：2014-07-25 00:20:54
【问题描述】：

我正在使用 Bootstrap 开发单页 Web 应用程序前端。我在页面的一侧有一个菜单，我希望突出显示选择的任何项目。

HTML：

<div class="col-sm-3 col-md-2 sidebar">
  <ul class="nav nav-sidebar">
    <li><a href="#">Get Snippet</a>
    </li>
    <li class="active"><a href="#">Tags</a>
    </li>
    <li><a href="#">Rules</a>
    </li>
    <li><a href="#">Macros</a>
    </li>
    <li><a href="#">History</a>
    </li>
    <li><a href="#">Performance</a>
    </li>
  </ul>
</div>

我在网上搜索了一些有关如何执行此操作的信息，但我只找到了为每个菜单项使用单独的 .html 页面实现解决方案的资源。有没有办法使用 JavaScript 并且仅使用当前活动的 .html 页面来做到这一点？

这是我尝试的一个js sn-p，但它无法取消选择其他项目：

<script>
  var menuArr = document.getElementsByTagName("li");
  var prevLI = "";
  for (var i = 0; i < menuArr.length; i++) {
    menuArr[i].onclick = function() {
      if (prevLI != "" && prevLI != this) {
        prevLI.className = "";
      }
      this.className = "active";
      prevLI = this;
    }
  }
</script>

【问题讨论】：

刚刚添加了一些 jS :)
我会从所有导航列表项中删除活动类，然后将该类重新应用到单击的那个。抱歉，我不在我的比赛附近，否则我会举个例子。

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

嘿，我使用您的代码在 jsfiddle 上创建了一个示例：-

 var menuArr = document.getElementsByTagName("li");
 var prevLI = document.getElementsByClassName('active');
 if (prevLI)
     prevLI = prevLI[0];
 for (var i = 0; i < menuArr.length; i++) {
     menuArr[i].onclick = function() {
         if (prevLI != "" && prevLI != this) {

             prevLI.className = "";
         }
         this.className = "active";
         prevLI = this;
     }
 }

工作示例：http://jsfiddle.net/BtkCf/163/

谢谢

【讨论】：

感谢您的示例！