We Keep Coding

I want to make a parent nav link sidebar active when its child is active (current page)

Here's my code:
I want it in a way that when i click on a child link, it becomes active and the parent link is active too. I utilize the css class .active for my active classes for both the main and sub-menu.
The below JS snippet works but only for the menus without sub-menus
$(document).ready(function($) {
var url = window.location.href;
var activePage = url;
$('.menu li a').each(function() {
var linkPage = this.href;
if (activePage == linkPage) {
$(this).closest("li").addClass("active");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul class="list">
<li class="header">MAIN NAVIGATION</li>
<li class="">
<a href="index.php">
<i class="material-icons">home</i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="sell.php">
<i class="material-icons">receipt</i>
<span>Sell</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">show_chart</i>
<span>Reporting</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">apps</i>
<span>Products</span>
</a>
<ul class="ml-menu">
<li>
Add Product
</li>
<li>
All Products
</li>
<li>
Add Category
</li>
<li>
All Categories
</li>
</ul>
</li>
</ul>
</div>
<!-- #Menu -->

Implement an on mousedown event listener for your anchor tags, passing in the id for each anchor tag and use the parentElement property to get the element's parent.
document.getElementById("myLI").parentElement.nodeName;

you can try this JS code:
$(document).ready(function () {
$('a').click(function () {
//removing the previous selected menu state
$('.menu').find('li.active').removeClass('active');
//adding the state for this parent menu
$(this).parents("li").addClass('active');
});
});
And the css for Active link:
.active > a {
color:red;
}
hope it helps...

Bootstrap. Keep active class on new page

I have faced a problem with adding "active" class to my tabs.
I know how to add active class to tab when i click on it. But i don't know how to save active class on tab after page reload.
Part of my jsp code
<div class="row top-buffer">
<div class="col-md-10 col-md-offset-1 products">
<ul class="nav nav-pills cat-nav">
<c:forEach items="${catList}" var="category">
<li role="presentation" >
<a href="/show-category?id=${category.id}" >${category.name}</a>
<ul class="dropdownn">
<c:forEach items="${category.childCategories}" var="childCat">
<li>${childCat.name} </li>
</c:forEach>
</ul>
</li>
</c:forEach>
<li role="presentation" class="pull-right">All </li>
</ul>
</div>
</div>
Script for adding active class
$(document).ready(function () {
$('.cat-nav li a').click(function(e) {
$('.cat-nav li').removeClass('active');
var $parent = $(this).parent();
if (!$parent.hasClass('active')) {
$parent.addClass('active');
}
});
});
When i click on link it send me to another page, but that another page has no active class. So how can i "save" or "hold" active class and put in in new page.

Inside your click handler you are adding and removing the 'active' class on the <li> element. In bootstrap the 'active' class is applied to the <a> element instead. With a small adjustment to your code this works:
$('.cat-nav li a').click(function() {
$('.cat-nav li a').removeClass('active');
$(this).addClass("active");
});
Link to example in codepen:
http://codepen.io/johnwilson/pen/akVgxq

Finally i have solved it !
$(document).ready(function () {
var id = getParameterByName('id');
$('.cat-nav li[role="presentation"]').each(function() {
var id2 = $(this).attr("id");
if(id == id2){
$(this).addClass('active');
}
});
});
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
localStorage.setItem(name, results[2].replace(/\+/g, " "));
var result = localStorage.getItem("id");
return result;
}
<div class="row top-buffer">
<div class="col-md-10 col-md-offset-1 products">
<ul class="nav nav-pills cat-nav">
<c:forEach items="${catList}" var="category">
<li role="presentation" id="${category.id}">
<a href="/show-category?id=${category.id}" >${category.name}</a>
<ul class="dropdownn">
<c:forEach items="${category.childCategories}" var="childCat">
<li>${childCat.name} </li>
</c:forEach>
</ul>
</li>
</c:forEach>
<li role="presentation" class="pull-right" id="0">All </li>
</ul>
</div>
</div>

Create a menu file with dynamic tabs

I am trying to make my website's menu in one file only and just include it in the rest of the .html pages. I am copy and pasting the menu each time I make a new page because I want the tab that is active to be highlighted for each different page. This is the reason why I can't make one file only for every page, and I have no idea how can I make it work to set the tab active in each different page.
This is the code I am copy-pasting in each page.
<!-- BEGIN MENU -->
<section id="menu-area">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div id="navbar" class="navbar-collapse collapse">
<ul id="top-menu" class="nav navbar-nav navbar-right main-nav">
<li>Home</li>
<li>Downloads</li>
<li>Media</li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown">Research <span
class="fa fa-angle-down"></span></a>
<ul class="dropdown-menu" role="menu">
<li>D3</li>
</ul></li>
<li>Team</li>
<li class="active">Contact</li>
</ul>
</div>
<!--/.nav-collapse -->
<a href="#" id="search-icon"> <i class="fa fa-search"> </i>
</a>
</div>
</nav>
</section>
<!-- END MENU -->
In this case the contact tab is highlighted:
<li class="active">Contact</li>
If the case is that the home page is active, then I would need to do this:
<li class="active">Home</li>
I hope I made myself clear, my English is terrible. I appreciate any idea, I am really new at web development.

One thing you can do is to read the URL and on base of that you add the active class to that link in your menu.
$(function() {
var pgurl = window.location.href.substr(window.location.href
.lastIndexOf("/")+1);
$("#nav ul li a").each(function(){
if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
$(this).addClass("active");
})
});

Using D3
<script>
var pgUrl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
d3.select("#navbar").selectAll("a").each(function(d){
if(d.tecode here == pgUrl )
d.attr("class","active");
});
</script>

I think this way more useful:
$(function(){
var pgUrl = window.location.href.substr(window.location.href.lastIndexOf('/') + 1);
$("#nav ul li a[href='"+ pgUrl +"']").addClass('active');
});

Unable to put active in particular ul li

I am having the ul li structure as:
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li class="active treeview">
<a href="#">
<span>Dashboard</span>
</a>
<ul class="treeview-menu">
<li class="active">Dashboard v1</li>
<li>Dashboard v2</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<span>Layout Options</span>
<span class="label label-primary pull-right">4</span>
</a>
<ul class="treeview-menu">
<li>Top Navigation</li>
<li>Boxed</li>
<li>Fixed</li>
<li> Collapsed Sidebar</li>
</ul>
</li>
</ul>
What i tried is
$(".sidebar-menu ul li a").on("click", function() {
$(".active treeview")
.not($(this).parents('li'))
.removeClass('active treeview');
$(this)
.parent()
.addClass('active treeview')
.find("ul.treeview")
.stop("true", "true")
.slideDown()
.addClass('active');
$(this)
.parent()
.siblings()
.find("ul.treeview")
.stop("true", "true")
.slideUp()
.removeClass('active');
});
Here the class 'active treeview' shows the Main menu as active and class active shows sub menu active.
i tried using javascript to remove all other classes, the classes get removed but when adding class to the particular li it do not works. how to write the java script when i click on some menu it shows that sub menu and his parent is activated.

try this one
works for both side menu and treeview
/** add active class and stay opened when selected */
var url = window.location;
// for sidebar menu entirely but not cover treeview
$('ul.sidebar-menu a').filter(function() {
return this.href == url;
}).parent().siblings().removeClass('active').end().addClass('active');
// for treeview
$('ul.treeview-menu a').filter(function() {
return this.href == url;
}).parentsUntil(".sidebar-menu > .treeview-menu").siblings().removeClass('active').end().addClass('active');

Trigger active class of parent link when on child link page

I have the javascript code below to put my parent menu item to class active when I'm on the page for example https://stackoverflow.com/questions/ it works. But I also wanna put the parent menu item to class active when I'm at the subpages/child menu item like https://stackoverflow.com/questions/ask/, may I know how to do that?
Example I'm at this page https://stackoverflow.com/questions/ask/, how to I get the URL like this https://stackoverflow.com/questions/, without the /ask so that I can have the parent menu item (question) to be in active class when I'm at the child page of question which is (ask).
The code below only works if I'm at https://stackoverflow.com/questions/, but if I'm at the child page https://stackoverflow.com/questions/ask/, parent link (https://stackoverflow.com/questions/) doesn't change to active class.
<ul class="nav navbar-nav">
<li><h5>Home</h5></li>
<li class="dropdown">
<h5>Online<span class="caret"></span></h5>
<ul class="dropdown-menu" role="menu">
<li>History</li>
<li>Science</li>
<li>Mathematics</li>
<li>English</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var url = window.parent.location.href;
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');
$('ul.nav a').filter(function() {
return this.href == url;
}).parent().addClass('active');
</script>

You can use parents() to match the parent and all ancestors. Give it a selector argument to restrict to just the li tags.
$('ul.nav a').filter(function() {
return this.href == url;
}).parents('li').addClass('active');