I want to highlight the active page on the side bar menu. I am using Bootstrap (Limitless).
I have tried a number of javascript ways to no avail. Below is the side bar menu. i'm using Limitless and I can't add active state to menu items with jquery. I searched but there's only examples for v2 and the the anchors are the ones with the active class instead the list items.
Menu Structure Example
<div class="card card-sidebar-mobile">
<ul class="nav nav-sidebar" data-nav-type="accordion">
<!-- Main -->
<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Ana</div> <i class="icon-menu" title="Ana"></i></li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="icon-home2"></i>
<span>
Anasayfa
</span>
</a>
</li>
<!-- Site Yönetimi -->
<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Site Yönetimi</div> <i class="icon-menu" title="Site Yönetimi"></i></li>
<li class="nav-item nav-item-submenu nav-item-open">
<a href="#" class="nav-link"><i class="icon-cog4"></i> <span>Site Yönetimi</span></a>
<ul class="nav nav-group-sub "style="display: block" data-submenu-title="Site Yönetimi">
<li class="nav-item"><a href="#" class="nav-link active">Test</a></li>
<li class="nav-item"><a href="#" class="nav-link">Yeni</a></li>
<li class="nav-item"><a href="#" class="nav-link">Deneme</a></li>
</ul>
</li>
<!-- Test-->
<li class="nav-item nav-item-submenu nav-item-expanded">
<a href="#" class="nav-link"><i class="icon-pencil3"></i> <span>Form components</span></a>
<ul class="nav nav-group-sub" data-submenu-title="Form components">
<li class="nav-item"><a href="form_inputs.html" class="nav-link">Basic inputs</a></li>
</ul>
</li>
<li class="nav-item-header"><div class="text-uppercase font-size-xs line-height-xs">Page kits</div> <i class="icon-menu" title="Page kits"></i></li>
<li class="nav-item nav-item-submenu">
<a href="#" class="nav-link"><i class="icon-grid6"></i> <span>General pages</span></a>
<ul class="nav nav-group-sub" data-submenu-title="General pages">
<li class="nav-item"><a href="general_feed.html" class="nav-link">Feed</a></li>
<li class="nav-item"><a href="general_embeds.html" class="nav-link">Embeds</a></li>
<li class="nav-item nav-item-submenu">
<a href="#" class="nav-link">Blog</a>
<ul class="nav nav-group-sub">
<li class="nav-item"><a href="blog_classic_v.html" class="nav-link">Classic vertical</a></li>
<li class="nav-item"><a href="blog_classic_h.html" class="nav-link">Classic horizontal</a></li>
<li class="nav-item-divider"></li>
</ul>
</li>
<li class="nav-item nav-item-submenu">
<a href="#" class="nav-link">Timelines</a>
<ul class="nav nav-group-sub">
<li class="nav-item"><a href="timelines_left.html" class="nav-link">Left timeline</a></li>
<li class="nav-item"><a href="timelines_right.html" class="nav-link">Right timeline</a></li>
<li class="nav-item"><a href="timelines_center.html" class="nav-link">Centered timeline</a></li>
</ul>
</li>
<li class="nav-item nav-item-submenu">
<a href="#" class="nav-link">Gallery</a>
<ul class="nav nav-group-sub">
<li class="nav-item"><a href="gallery_grid.html" class="nav-link">Media grid</a></li>
<li class="nav-item"><a href="gallery_titles.html" class="nav-link">Media with titles</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
$(function () {
var url = window.location;
const allLinks = document.querySelectorAll('.nav-item a');
const currentLink = [...allLinks].filter(e => {
return e.href == url;
});
if (currentLink.length > 0) { //this filter because some links are not from menu
currentLink[0].classList.add("active");
//currentLink[0].closest(".has-treeview").classList.add("active");
}
var url2 = window.location;
const allLinks2 = document.querySelectorAll('.nav-item.nav-item-submenu a');
const currentLink2= [...allLinks2].filter(e => {
return e.href == url2;
});
if (currentLink2.length > 0) { //this filter because some links are not from menu
currentLink2[0].closest(".nav-item-submenu").classList.add("nav-item-open");
currentLink2[0].classList.add("active");
currentLink2[0].closest(".nav-group-sub").style.display = "block";
}
});
It worked that way. Any errors in script?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.