How to set active class on current nav item - javascript

I am facing problem while setting active class on nav item.
Here is my code on template
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<li class="nav-item">
<a href="{{ url('/dashboard') }}" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>
Dashboard
</p>
</a>
</li>
<li class="nav-item">
<a href="{{ url('/dashboard/logo') }}" class="nav-link">
<i class="nav-icon fab fa-bandcamp"></i>
<p>
Add/Change Logo
</p>
</a>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-image"></i>
<p>
Banner
<i class="fas fa-angle-left right"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{ url('/dashboard/banner') }}" class="nav-link">
<i class="nav-icon fas fa-plus"></i>
<p>Add Banner</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('/dashboard/banner/edit')}}" class="nav-link">
<i class="nav-icon fas fa-edit"></i>
<p>Edit Banner</p>
</a>
</li>
</ul>
</li>
</ul>
</nav>
I tried
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var url = window.location;
$('ul.nav li.nav-item a[href="' + url + '"]').parent().addClass('active');
$('ul.nav li.nav-item a').filter(function () {
return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
});
</script>
But this code setting the "active" class on list tag but not in anchor tag.

Instead of using .parent(), try using .closest('a').
closest() will traverse UP the DOM tree until it finds the specified selector - in the above example, the first <a> tag above the element.
Virtually all of your .parent() can be replaced with .closest() - but use as desired. There is no "right" or "wrong", just what works or is easiest for you.
You can use any normal css/jQuery selector with closest() - from a tagName:
.closest('a')
to a className:
.closest('a.nav-item')
etc.
Reference:
https://api.jquery.com/closest/

Related

Nav bar get Active for two items

in my web project, I used a free theme https://themewagon.com/themes/free-bootstrap-4-html-5-admin-dashboard-website-template-skydash/
Here in the nav bar, I customized it as
<nav class="sidebar sidebar-offcanvas" id="sidebar">
<ul class="nav">
<li class="nav-item">
<a class="nav-link elements" href="~/Home/Index">
<i class="icon-grid menu-icon"></i>
<span class="menu-title">Dashboard</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("Index","SelfService")">
<i class="ti-menu-alt menu-icon"></i>
<span class="menu-title">Our Services</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("OnProcessTasks","SelfCareTasks")">
<i class="ti-timer menu-icon"></i>
<span class="menu-title">In Process Tasks</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("CompletedTasks","SelfCareTasks")">
<i class="ti-file menu-icon"></i>
<span class="menu-title">Completed Tasks</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#Url.Action("OnProcessTasks","SelfCareTasks")">
<i class="ti-face-smile menu-icon"></i>
<span class="menu-title">My Profile</span>
</a>
</li>
</ul>
</nav>
My issue is When I run this, on load first 2 items showed as Active and both items are highlighted. I checked with the sample, but it runs without this issue, also I tried removing the href and then the nav bar showed only one item as active.
I still couldn't figure out why this happening. Any comments?
I can't see what is wrong other than just this thing:
<a class="nav-link elements" href="~/Home/Index">
Change it to:
<a class="nav-link elements" href="#Url.Action("Index", "Home")">
The reason for this change is because you're following the Razor Syntax.

Active SideBar Jquery

My jquery code does not perform active sidebar action. where did I mistake, can anyone tell us?
Where should I have to change..? should I have make somechange in html code..?
This is my jquery code
$(function() {
$(".sidebar-menu li").removeClass("active");
$("#liaccounts").addClass("active");
$("#selectAll").click(function() {
// $(".checkAll").prop('checked', $(this).prop('checked'));
var checked = ($(".checkAll").prop('checked') == false) ? true : false;
$(".checkAll").prop('checked', checked);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar-menu">
<!-- Sidebar user panel (optional) -->
<!-- Sidebar Menu -->
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!--
Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library
-->
<li class="nav-item">
<a href="{{url('dashboard')}}" class="nav-link active">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('contact')}}" class="nav-link">
<i class="nav-icon fas fa-file"></i>
<p>Contact</p>
</a>
</li>
<li class="nav-item">
<a href="{{url('accounts')}}" class="nav-link">
<i class="nav-icon fas fa-user"></i>
<p>Accounts</p>
</a>
</li>
</ul>
</nav>
</div>

Sidebar menu not working in Laravel+vue+adminlte

I have installed AminLte v3 using npm in my Laravel + vue project ad evrything is working great but when i click on the Side navbar main menu which is tagged as
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Members
<i class="fas fa-angle-left right"></i>
<span class="badge badge-warning right">new:2</span>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<router-link :to="{name : 'members'}" class="nav-link">
<i class="fas fa-user-check nav-icon"></i>
<p>All</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersLatest'}" class="nav-link">
<i class="fas fa-user-plus nav-icon"></i>
<span class="badge badge-danger right">2</span>
<p>Latest</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersPending'}" class="nav-link">
<i class="fas fa-user-clock nav-icon"></i>
<p>Pending</p>
</router-link>
</li>
<li class="nav-item">
<router-link :to="{name:'membersSuspended'}" class="nav-link">
<i class="fas fa-user-lock"></i>
<span class="badge badge-danger right">2</span>
<p>Suspended</p>
</router-link>
</li>
</ul>
</li>
It is redirecting me to # router path which is coming from
<a href="#" class="nav-link">
<i class="nav-icon fas fa-users"></i>
<p>
Members
<i class="fas fa-angle-left right"></i>
<span class="badge badge-warning right">new:2</span>
</p>
</a>
This part and it is not opening sub-menus inside the main-menu and I am including the navBar from a another vue component.
Can anybody give an idea how am I going to solve this?
When you are hitting on another route instead of admitlte routes, the treeview selector is unable to find the element. When you push the url to redirect into adminlte , the treeview won't work because the selector is defined before element mounted.
To fix this problem define a mounted hook in the sidebar component.
mounted(){
$('[data-widget="treeview"]').Treeview('init');
}
in the bootstrap.js file put require('admin-lte') below
require('bootstrap')

How can I select elements having specific siblings?

How can I prevent anchor (<a>) tag from doing nothing if li has ul according to the following code:
<aside class="sidebar">
<div id="leftside-navigation" class="nano">
<ul class="nano-content">
<li>
<a href="index.html">
<span>Home</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:void(0);">
<span>Categories</span>
<i class="arrow fa fa-angle-right pull-right"></i>
</a>
<ul>
<li>
<a href="index.html">
<span>Home</span>
</a>
</li>
<li>
<a href="index.html">
<span>Lifestyles</span>
</a>
</li>
<li>
<a href="index.html">
<span>Technology</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
I've tried to put javascript:void(0) - it works but I wanted to make it with if else statement or any other way.
I wanted to do that is:
if li.submenu has ul li.has-submenu a prevent default
You can write a selector for a that's a child of an li that has a submenu.
$("li:has(ul) > a").click(function(e) {
e.preventDefault();
});
Another approach would be to not include the <a> tag in general. Just write the the text "Categories" within the <li class="sub-menu> and it will display in menu as normal.
Example:
<li class="sub-menu">
<span>Categories</span>
<i class="arrow fa fa-angle-right pull-right"></i>
<ul>
<li>......
Although you would need to add CSS if you want the cursor to change or if you want the text to be underlined for your <span> etc...
You can also try this.
$("li").find("ul > a").click(function(e) {
e.preventDefault();
});

Add and remove class to nav after page reload

I have a navigation which can have up to two sub menus. Means, I have to open the li above (add class "open" to class "arrow") two times if the current page is a href in a sub sub navigation.
However, I am struggling on how to do this, how to solve this problem. My idea was to solve it via jQuery. Is there a better solution?
This is my navigation:
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-light">
<li class="nav-item start">
<a href="my-domain.com/dashboard" class="nav-link nav-toggle">
<i class="icon-home"></i>
<span class="title">Dashboard</span>
<span class="selected"></span>
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<i class="icon-people"></i>
<span class="title">Kontakte</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item">
<a href="my-domain.com/kontaktverwaltung" class="nav-link ">
<span class="title">Kontaktverwaltung</span>
<span class="selected"></span>
</a>
</li>
<li class="nav-item">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<span class="title">Kunden</span>
<span class="arrow"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
Kundendetails
<span class="selected"></span>
</li>
<li class="nav-item">
Kundenverwaltung
<span class="selected"></span>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Example:
The current page is this one: my-domain.com/kundenverwaltung. That means, I have to add the class "active open" to both li elements of the ul sub menus as well as the class "open" to the class "arrow" of the li elements.
This is how it should be:
<ul class="page-sidebar-menu page-header-fixed page-sidebar-menu-light">
<li class="nav-item start">
<a href="my-domain.com/dashboard" class="nav-link nav-toggle">
<i class="icon-home"></i>
<span class="title">Dashboard</span>
</a>
</li>
<li class="nav-item **active open**">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<i class="icon-people"></i>
<span class="title">Kontakte</span>
<span class="arrow **open**"></span>
</a>
<ul class="sub-menu">
<li class="nav-item">
<a href="my-domain.com/kontaktverwaltung" class="nav-link ">
<span class="title">Kontaktverwaltung</span>
</a>
</li>
<li class="nav-item **active open**">
<a href="javascript:void(0)" class="nav-link nav-toggle">
<span class="title">Kunden</span>
<span class="arrow **open**"></span>
</a>
<ul class="sub-menu">
<li class="nav-item ">
Kundendetails
</li>
<li class="nav-item">
Kundenverwaltung
</li>
</ul>
</li>
</ul>
</li>
</ul>
I have marked the changes on the classes with ** before and after the class name. This is my jQuery so far:
<script>
$("a.nav-link").each(function(index){
if($(this).attr("href") == window.location.href) {
$(this).parent().addClass("active open");
if ($(this).parent().parent().is("ul")) {
$(this).parent().parent().parent().addClass("active open");
var li = $(this).parent().parent().parent();
$(li[0].nodeName + " .arrow").addClass("open");
}
}
});
</script>
However, I don't think this is the best solution.. is there any better way? Kind regards
If you change the structure of HTML, your code will not be work, so - don't use parent(), try to use closest() https://api.jquery.com/closest, by reason that the closest() is a more reliable method
Cache data. U can use
http://api.jquery.com/attribute-equals-selector:
var $a = jQuery('a[href*="' + window.location.href + '"]');
$a.addClass("active open");
For adding a class to active page you should try added this by backend side, different kind of templating - can do it. But your approach also can be use

Categories