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

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>

这里,当用户点击主导航栏时,li基于href突出显示相应的.当用户点击侧面导航栏时,使用相同的逻辑来突出显示侧面导航栏,但这里是为了保持主导航栏在我检查URL是否包含某个文本的同时突出显示.

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

例如,如果用户在主导航栏上选择" 主页",则会加载整个页面,并根据网址突出显示"主页"选项卡.现在,当用户在侧栏上选择" 删除"时,将加载整个页面,并根据URL突出显示"删除"侧边栏.这里,为了在选择删除时突出显示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>元素中包含的所有活动类。然后使用它在被单击元素的父元素上添加活动类。侧边栏导航也是如此