How to Add Active Navigation Class Based on URL
By Tan Lee Published on Feb 16, 2024 458
If you got a problem with highlight the active link in a navigation menu when selected, this example might help you solve it.
Our goal is to add the active attribute to the li tag that is currently selected
<ul class="nav sidebar-menu"> <li class="active"> <a href="/Home"> <i class="menu-icon glyphicon glyphicon-home"></i> <span class="menu-text"> Dashboard</span> </a> </li> <li> <a href="#" class="menu-dropdown"> <i class="menu-icon fa fa-table"></i> <span class="menu-text"> Category</span> <i class="menu-expand"></i> </a> <ul class="submenu"> <li> <a href="/Company"> <span class="menu-text">Company</span> </a> </li> <li> <a href="/Account"> <span class="menu-text">Account</span> </a> </li> </ul> </li> </ul>
To active navigation class base on url, you can use the script below
<script> $('li > a').click(function () { $('li').removeClass(); $(this).parent().addClass('active'); }); </script>
- How to use sweetalert2
- How to Pass string parameter in an onclick function
- How to format number with commas and decimal in Javascript
- What does 'use strict;' means in Javascript
- How to detect if caps lock is pressed in Javascript
- How to create a Custom Event in Javascript
- How to Check if an Object Has a Property Properly in JavaScript
- How to convert an Uint8Array to string in Javascript
Categories
Popular Posts
Freedash bootstrap lite
Nov 13, 2024
Responsive Admin Dashboard Template
Nov 11, 2024
Material Lite Admin Template
Nov 14, 2024
Gentella Admin Template
Nov 14, 2024