如何同时高亮主导航栏和侧导航栏？

Question

下面的页面有两个侧面以及一个主导航栏。我目前正在使用当前的 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>

这里，当用户点击主导航栏时，对应的li会根据href高亮显示。 当用户点击侧边导航栏时，使用相同的逻辑来突出显示侧边导航栏，但在这里保持主导航栏突出显示的同时，我正在检查 url 是否包含特定文本。

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

例如，如果用户在主导航栏上选择主页，则整个页面都会加载，并且主页选项卡会根据 url 突出显示。 现在，当用户在侧边栏上选择 Delete 时，整个页面都会加载，并且删除侧边栏会根据 url 突出显示。在这里，为了在选择删除时保持主页突出显示，我正在检查 url 是否包含特定文本。那么，在本示例中，当在侧边栏导航上选择“删除”时，是否有更好的方法可以在主导航栏中突出显示“主页”选项卡？

您能否建议一种更好的方法，当用户在不检查当前网址的情况下单击侧面导航栏时同时突出显示主导航栏？

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>这个元素中的活动类。然后在单击元素的父元素上添加活动类 get 使用它。侧边栏导航也一样

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();
  });
});

在此示例中，您需要将路径更改回您自己的路径。当您点击 Home、Option、Ratings 或 Admin 时，页面加载时将突出显示（它的父级获取类 active）。然后，当您单击添加、查看/修改、删除时，它的父级会在页面加载时突出显示（active 类被添加到它的父级）。当您检查每个 li 时，您可以看到这一点。

根据您的描述，解决了您描述的各种场景。