How to Add Active Navigation Class Based on URL
By FoxLearn 2/16/2024 9:46:12 AM 61
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 Display popup message in Javascript
- How to Show message instead of alert
- How to fix 'Uncaught TypeError: Cannot read property 'fn' of undefined'
- How to Format numbers with commas in Javascript
- How to format number with commas and decimal in Javascript
- How to Pass string parameter in an onclick function
- How to get @Url.Action url in a separate script file?
- How to use sweetalert2
Categories
Popular Posts
Visual Studio: Auto increment version
04/01/2024
What is ARM architecture?
04/01/2024