Question

以下页面既有侧面也有主导航栏。我目前正在使用当前网址突出显示相应的导航栏。请在下面我正在使用的代码中找到：

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突出显示相应的li。当用户点击侧面导航栏时，使用相同的逻辑突出显示侧面导航栏，但这里是为了保持主导航栏高亮显示我正在检查网址是否包含某个文本。

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

例如，如果用户在主导航栏上选择主页，则会加载整个页面，并根据网址突出显示“主页”选项卡。现在，当用户选择侧栏上的删除时，将加载整个页面，并根据网址突出显示删除侧边栏。这里，为了在选择删除时突出显示Home，我正在检查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>此元素中包含的所有活动类。然后使用此方法在已点击元素的父元素上添加活动类。侧边栏导航相同

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时，您可以看到这一点。

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

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

2 个答案: