Question

我正在使用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代码段，但无法取消选择其他项目：

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

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

感谢

单页Web-App菜单选择

1 个答案: