How to highlight the main navigation bar and side navigation bar at the same time?

Question

The page below has both a sidebar and a main navigation bar. I am currently using the current URL to highlight the corresponding navigation bar. Please find below code that I use:

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 highlighted based on href. When a user clicks on the side navigation bar, the same logic is used to highlight the side navigation bar, but here, to highlight the main navigation bar at the same time, I check if the URL contains certain text.

Here, under each main navigation bar, there is a set of corresponding side navigation bars. JS highlightSection is called when the page loads.

For example, if a user selects Home on the main navigation bar, the entire page loads and the Home tab is highlighted depending 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, to highlight Home when Delete is selected, I check to see if the URL contains specific text. So, is there a better way in this example to save the highlighted Home tab on the main navigation bar if Delete is selected on the sidebar navigation bar?

Could you suggest a better way to simultaneously highlight the main navigation bar when the user clicks on the side navigation bar without checking the current URL?

Answer 1

Ok, quickly check out the code below,

  <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 the user clicks on the navigation bar, $ ('# navbar a'). click () this function will be called, and we will first clear the entire active class contained in <ul class="nav navbar-nav" id="navbar">....</ul> this element. and then adds the active class to the parent of the clicked get element using this. same for nav sidebar

Answer 2

I commented on jsfiddle which was getting there, but plnkr.co is the best option for this example.

My working example: 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(); }); }); 

In this example, you will need to change the path back to your own. When you click "Home", "Option", "Ratings" or "Admin", they will be highlighted (the parent gets the class active ) when the page loads. When you click Add, Show / Change, Delete, it gets highlighted (class li.

Based on your description, this applies to the various scenarios described.