How to highlight the main navigation bar and the side navigation bar simultaneously?

Question

The below page has both side as well as a main navigation bar. I am currently using the current url to highlight the corresponding navigation bar. Please find below the code I am using:

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>

Here , when the user clicks on the main navigation bar, the corresponding li is highlighted based on the href. When the user clicks on the side navigation bar the same logic is used to highlight the side navigation bar but here to keep the main navigation bar highlighted at the same time I am checking if the url contains a certain text.

Here, under each main navigation bar there is a set of corresponding side navigation bars. The js highlightSection is called on page load.

For example, if the user selects Home on the main navbar the entire page loads and the Home tab is highlighted based on the url. Now , when the user selects Delete on the sidebar the entire page loads and the Delete sidebar is highlighted based on the url. Here, in order to keep Home highlighted when Delete is selected I am checking if the url contains a certain text. So, in this example is there any better way of keeping the Home tab highlighted in the main navbar when Delete is selected on the sidebar navigation?

Could you suggest a better way of highlighting the main navigation bar simultaneously when the user clicks on the side navigation bar without checking the current url?

Answer 1

well, on a quick look check the below code,

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

As user click on the navigation bar, $('#navbar a').click() this fucntion will be called, and we will first clear all the active class containing within the <ul class="nav navbar-nav" id="navbar">....</ul> this element. and then adds the active class on the parent element of the clicked element get using this. same for the sidebar nav