如何同时突出显示主导航栏和侧面导航栏？

Question

下面的页面有侧边栏和主导航栏。我目前正在使用当前URL来突出显示相应的导航栏。请查看下面的代码：

```html

以下页面既有侧边栏，又有主导航栏。我目前使用当前URL来突出显示相应的导航栏。以下是我使用的代码:

```

highlightSection = function() {
  var url = location.href.toLowerCase();
  $("#navbar li a").each(function() {
    if (url == this.href.toLowerCase()) {
      $(this).parent().addClass("active");
    }
  });

  $(".nav-sidebar li a").each(function() {
    if (url == this.href.toLowerCase()) {
      var nav;

      if ( url.indexOf('/brand') !== -1 ) {
        nav = App.contextPath + "/brand/home";
      } else if ( url.indexOf('/Options') !== -1 ) {
        nav = App.contextPath + "/Options";
      } else if ( url.indexOf('/ratings') !== -1 ) {
        nav = App.contextPath + "/ratings/home";
      } else {
        nav = App.contextPath + "/admin/home";
      }

      $(this).parent().addClass("active");
      $('#navbar li:has(a[href="' + nav + '"])').addClass("active");
    }
  });
};

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#"> Tool</a>
    </div>
    <div>
      <ul class="nav navbar-nav" id="navbar">
        <li><a href="/brand/home">Home</a></li>
        <li><a href="/Options">Options</a></li>
        <li><a href="/ratings/home">Ratings</a></li>          
        <li><a href="/admin/home">Admin</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="col-sm-3 col-md-2 sidebar">
  <ul class="nav nav-sidebar">
    <li class="active"><a href="#">Add </a>
    </li>
    <li><a href="#">View/Modify</a>
    </li>
    <li><a href="#">Delete</a>
    </li>
  </ul>
</div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

在这里，当用户点击主导航栏时，基于href，相应的

标签会被高亮显示。 当用户在侧边导航栏上单击时，同样的逻辑被用于突出显示侧边导航栏，但为了保持同时高亮显示主导航栏，我会检查url是否包含特定文本。

在这里，每个主导航栏下都有一组相应的侧边导航栏。 js函数highlightSection在页面加载时被调用。

例如，如果用户在主导航栏上选择Home，整个页面将加载，并且基于url，Home选项卡将被突出显示。 现在，当用户在侧边栏上选择Delete时，整个页面将加载，并且基于url，Delete侧边栏将被突出显示。在这里，为了在选中侧边导航栏的Delete选项时保持Home选项卡高亮显示，我会检查url是否包含特定文本。所以，在这个例子中，是否有更好的方法在侧边导航栏被选中时同时保持主导航栏中的Home选项卡高亮显示？

您能否建议一种更好的方法，在用户单击侧边导航栏时同时突出显示主导航栏，而不必检查当前的url？

- user2077648

---

搞清楚一件事...你基本上想要用更短的代码突出显示当前页面导航列表项？ - Luuk Skeur

在这里测试：https://jsfiddle.net/Twisty/3pqx017f/，它并没有太多意义。不清楚你想要什么时候突出显示。 - Twisty

例如，当用户单击“主页”按钮时，需要突出显示“主页”选项卡。但是接下来，当用户单击侧边栏的“删除”按钮时，“主页”和“删除”都需要被突出显示。 - user2077648

highlightSection 在页面加载时默认被调用。当用户单击主导航栏或侧边栏时，整个页面会被加载。 - user2077648

将状态保存到 cookie 或本地存储中。 - gu mingfeng

Answer 1

好的，快速查看下面的代码，

     <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#"> Tool</a>
        </div>
        <div>
          <ul class="nav navbar-nav" id="navbar">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Options</a></li>
            <li><a href="#">Ratings</a></li>          
            <li><a href="#">Admin</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar" id="sidebar">
        <li class="active"><a href="#">Add </a>
        </li>
        <li><a href="#">View/Modify</a>
        </li>
        <li><a href="#">Delete</a>
        </li>
      </ul>
    </div>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script>
$('#navbar a').click(function(){
$('#navbar li.active').removeClass('active');
$(this).parent().addClass('active');
})
$('#sidebar a').click(function(){
$('#sidebar li.active').removeClass('active');
$(this).parent().addClass('active');
})
</script>
<style>
.active{
  border-bottom:1px solid red;
}
</style>

当用户点击导航栏时，将调用$('#navbar a').click()函数，我们首先将清除包含在<ul class="nav navbar-nav" id="navbar">....</ul>元素中的所有活动类。然后，在使用this获取被点击元素的父元素上添加活动类。侧边栏导航同理。

- Nalin Aggarwal

---

你能否进一步详细解释一下，以便未来的访问者更好地理解这个答案？ - Michael Z.

这个答案不适用，因为页面在用户选择特定标签时会重新加载。在这里，应该根据用户的选择，在页面加载时设置活动类。 - user2077648

我认为这是针对单页应用程序的。 - Nalin Aggarwal

抱歉 @micheal，我没有解释清楚。已完成描述。 - Nalin Aggarwal

Answer 2

我曾在jsfiddle上发表评论，那里的代码已经接近完成，但对于这个例子来说，plnkr.co是更好的选择。

我的工作示例：https://plnkr.co/edit/9YHEVfPqdqafBjiKbueS?p=preview

HTML

<!DOCTYPE html>
<html>

  <head>
    <title>Home</title>
    <script data-require="jquery@1.11.3" data-semver="1.11.3" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" data-semver="3.3.6" data-require="bootstrap-css@3.3.6" />
    <script src="code.js"></script>
  </head>

  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a href="#" class="navbar-brand"> Tool</a>
        </div>
        <div>
          <ul id="navbar" class="nav navbar-nav">
            <li>
              <a href="index.html">Home</a>
            </li>
            <li>
              <a href="options.html">Options</a>
            </li>
            <li>
              <a href="ratings.html">Ratings</a>
            </li>
            <li>
              <a href="admin.html">Admin</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="col-sm-3 col-md-2 sidebar">
      <ul class="nav nav-sidebar">
        <li class="active">
          <a href="#">Add </a>
        </li>
        <li>
          <a href="#">View/Modify</a>
        </li>
        <li>
          <a href="#">Delete</a>
        </li>
      </ul>
    </div>
  </body>

</html>

jQuery

$(function() {
  var url = location.href.toLowerCase();
  var action = getURLParam("action");
  console.log("Current URL: ", url);
  console.log("Action: ", action);

  function getURLParam(sParam) {
    var sPageURL = window.location.search.substring(1);
    var sURLVariables = sPageURL.split('&');
    for (var i = 0; i < sURLVariables.length; i++) {
      var sParameterName = sURLVariables[i].split('=');
      if (sParameterName[0] == sParam) {
        return sParameterName[1];
      }
    }
  }

  // Highlight Active link for current page
  $("#navbar li a").each(function(k, v) {
    var target = v.href.toLowerCase();
    console.log("Seeking withinin: ", target);
    if (url.indexOf(target) !== -1) {
      console.log(url.indexOf(target), " Active: ", this);
      $(this).parent().addClass("active");
    }
    if(url.lastIndexOf("/") + 1 == url.length){
      console.log("No match, highlighting Home.");
      $("#navbar li a[href='index.html']").parent().addClass("active");
    }
  });
  // Populate Action links and highlight
  $(".nav-sidebar li a").each(function(k, v) {
    var targetPage = url.substring(url.lastIndexOf("/") + 1);
    if(targetPage.indexOf("?")){
      targetPage = targetPage.substring(0, targetPage.indexOf("?"));
    }
    if ($(this).text().toLowerCase() == action) {
      console.log("Highlighting Action: ", $(this).text().toLowerCase());
      $(this).parent().addClass("active");
    }
    v.href = targetPage + "?action=" + $(this).text().toLowerCase();
  });
});

在这个例子中，您需要将路径更改为自己的路径。当您单击主页、选项、评级或管理员时，页面加载时会突出显示它们（其父元素得到类active）。然后，当您单击添加、查看/修改、删除时，它们的父元素会突出显示（类active被添加到其父元素）。您可以在检查每个li时看到这一点。

根据您的描述，这解决了您描述的各种情况。

- Twisty

---

我正在寻找一种方法，可以在不检查当前URL的情况下将活动类添加到主导航栏。 - user2077648

那么你想检查什么？你没有指定。 - Twisty