We Keep Coding

How to add active class on specific li on user click after page load using JavaScript

I have a menu with certain items and I want when a user clicks on any li than only its class becomes an active class. I have menu items like the following:
$(document).ready(function () {
$(function () {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
alert(pgurl);
$(".nav li a").each(function () {
if ($(this).attr("href") == pgurl || $(this).attr("href") == '') {
$(this).addClass("active");
}
})
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-9">
<nav class="nav-holder">
<div class="nav-footer">
<ul class="nav" id="navclk">
<li class="active">
Home
</li>
<li class="">
About
</li>
<li class="">
Car Rentals
</li>
<li class="">
Wedding Cars
</li>
<li class="">
Tempo Travellers
</li>
<li class="">
Tour Package
</li>
<li class="">
Coach
</li>
<li class="has-submenu">
Places
<ul class="submenu">
<li>Bhubaneswar</li>
<li>Puri</li>
<li>Konark</li>
<li>Chilika</li>
<li>Gopalpur</li>
<li>Cuttack</li>
<li>Bhitar Kanika</li>
<li>Daringbadi</li>
<li>Jajpur</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
</nav>
</div>
It's not working with the drop-down menus while working perfectly with all other menus not having drop-down items. How can I change the code that it works too with menu items having a drop-down list of items? I am also using update panel on my page.

This could be done by the following code
CSS
.active {
/* your active CSS */
}
html
<ul>
<li onclick="activeMe(this)">1</li>
<li onclick="activeMe(this)">2</li>
<li onclick="activeMe(this)">3</li>
<li onclick="activeMe(this)">4</li>
</ul>
JavaScript
function activeMe(li) {
console.log(li.setAttribute("class", "active"));
}
``

Correct Answer!
<!--Menu Active-->
<script type="text/javascript">
$(document).ready(function () {
$('.nav li').removeClass('active');
$(function () {
var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
$(".nav li a").each(function () {
if ($(this).attr("href") == pgurl) {
$(this).closest('li').addClass("active");
}
})
});
});
</script>
<!--Menu Active-->

Adding HTML children and parent tabs to active class using javascript

I have this fly-out mene. This is the HTML:
<ul class="nav">
<li class="tab"><a class="active" href='#sw_operations'>Software Operations</a></li>
<li class="tab"><a href='#software'>Software</a></li>
<li class="tab"><a href='#fac_staff'>Fac/Staff Members</a></li>
<li class="tab"><a href='#vendor'>Vendors</a></li>
<li class="tab"><a href='#admin'>Admin</a>
<ul>
<li><a href='#users'><span>Users</span></a></li>
<li><a href='#variables'><span>Variables</span></a></li>
<li><a href='#Reports'><span>Reports</span></a></li>
</ul>
</li>
</ul>
And this is the JS:
$('.tab a').on('click', function (e) {
e.preventDefault();
$(".tab a").removeClass('active');
$(".tab a").parent().removeClass('active');
$(this).addClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});
What I am struggling with is, when the user hits one of the 3 children tabs, I want it to add that specific child tab to active class as well as it's parent. I have a CSS part for the tab being active.
How do I add the parent tab in addition to the child tab to active class in JS?
Thanks :)

Something like that :
<li class="tab"><a id='admin' href='#admin'>Admin</a>
<ul>
<li><a href='#users' data-parent-id='admin'><span>Users</span></a></li>
<li><a href='#variables' data-parent-id='admin'><span>Variables</span></a></li>
<li><a href='#Reports' data-parent-id='admin'><span>Reports</span></a></li>
</ul>
$('.tab a').on('click', function (e) {
e.preventDefault(enter code here);
$(".tab a").removeClass('active');
$(this).addClass('active');
$(".tab #"+$(this).attr('data-parent-id')).addClass('active');
target = $(this).attr('href');
$('.tab-content > div').not(target).hide();
$(target).fadeIn(600);
});

I would do it like this but there are several ways how to do this...
Firstly you add a child class to all of your <li> elements. Then you add an id of 'Admin' for example to your admin <li>.
Now in jQuery you can check if the element on which you pressed is of class child or not. If it is true then you can add the class of active to your Admin <li>.
Code:
<li class="tab" id="Admin"><a href='#admin'>Admin</a>
<ul id="Children">
<li><a class="child" href='#users'><span>Users</span></a></li>
<li><a class="child" href='#variables'><span>Variables</span></a></li>
<li><a class="child" href='#Reports'><span>Reports</span></a></li>
</ul>
</li>
jQuery Code:
$('.tab a').on('click', function (e) {
if($(this).hasClass("child") == true) {
$("#Admin").addClass('active');
}
});
You just have to append the if statement to your code, I didn't include your code.

toggleclass active doesn't work properly

I want the menu to work like this. When you click Main1 it becomes active and the list will show, when you click it again the list will hide. When Main1 is active and you click Main2, then the Main1 should be inactive and Main2 active.
But my Javascript doesn't seem to make it work well. It makes the Main1 inactive when you click Main2 and the other way, but if you click on any of the active Main it doesn't become incactive. Please help
<div class="directory-section-list">
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main2</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul >
</div>
Javascript
$(' .list_item .lvl0').click(function(){
$(".list_item.active").removeClass("active");
$(this).parent().toggleClass('active');
});
$(' .list_item .lvl1').click(function(){
$(this).parent().toggleClass('active');
});

Try this,
$('.list_item .lvl0').click(function(){
$('.directory-section-list .active').removeClass('active');
if ($(this).parent().hasClass('active'))
{
$(this).parent().removeClass('active');
}
else
{
$(this).parent().addClass('active');
}
});
$('.list_item .lvl1').click(function(){
$(this).parent().toggleClass('active');
});

Please try this
HTML
<div class="directory-section-list">
<ul class="list_item">
<li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
</ul>
<ul class="list_item">
<li class="li_lvl lvl1" id="bx_1847241719_2">Main2</li>
<ul>
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
<ul>
<li>FD 15</li>
<li>FD 18</li>
</ul>
</ul>
</ul>
</div>
Java Script
$(' .list_item .lvl0').click(function () {
$(' .list_item .lvl1').parent().removeClass("active");
$(this).parent().toggleClass('active');
});
$(' .list_item .lvl1').click(function () {
$(' .list_item .lvl0').parent().removeClass("active");
$(this).parent().toggleClass('active');
});

Sorry but your HTML List had a couple of errors the
<li class=""><span class="li_lvl lvl1">1.5-4.5</span>
will never be closed...
its all about the HTML Structure - i've done another change -> check the HTML Structure of this JS Fiddle: http://jsfiddle.net/marco_rensch/hzu76hgt/32/

I think you want something like this?
$(document).ready(function(){
$('.maindiv').hide();
$( "button" ).click(function() {
$('.maindiv[data-link=' + $(this).data('link') + ']').toggle("fade",300);
});
});
div {
background-color: green;
color: white;
width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<button class="show" data-link="main1">Main1</button>
<button class="show" data-link="main2">Main2</button>
<div>
<div class="maindiv" data-link="main1">
<h1>This is main1</h1>
</div>
<div class="maindiv" data-link="main2">
<h1>This is main2</h1>
</div>
</div>

Well Thank you all for your help. I managed to do it taking some of your examples and making it work my own way. Thank you again. I will post the Javascript fix.
$(document).ready(function() {
$('.li_lvl').click(function () {
if ($(this).parent().hasClass('active')) {
$(this).parent().removeClass('active');
}
else {
$('.directory-section-list .active').removeClass('active');
$(this).parent().addClass('active');
}
});
This will toggle class active of the parent .li_lvl which is the ul.list_item. If parent has class active it will remove class active. If any other list_item will have class active whilst you click on the other list_item, it will remove class active on the other list_item and make class active on the list_item you clicked.

Function click on li element

I have a menu with li elements, after click on the one of the elements I like to run a function click and display alert with an id of li element.
JS
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
HTML
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$("#mainmenu li").click(function() {
alert(this.id);
});
</script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Unfortunately after click nothing happens. No errors in console as well.
Probably the mistake is in a JS code, do you have an idea what is an issue?

https://jsfiddle.net/pgsf6fot/
$(document).ready(function() {
$("#mainmenu li").click(function() {
alert( $(this).attr('id') );
});
});

You have 3 options here to solve your issue:
1- Put your JS code after the html element you need to bind too.
2- Use document.ready to make the js code execute after all html render.
3- Use On

use on event for dynamic elements
$(document).ready(function(){
$("#mainmenu").on("click","li",function() {
alert(this.id);
});
});

Might just be a matter of timing, the DOM might not be ready when your JS is executed. So you register the click events on elements that does not exists at that time, because they have not yet been rendered.
Try wrapping with a DOM ready listener (http://api.jquery.com/ready/), this will hold the executing of your JS until the DOM has been rendered.
$(function() {
$("#mainmenu li").click(function() {
alert(this.id);
});
})

$(function(){
$("#mainmenu li ul li ul li").click(function() {
alert(this.id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1">
<ul id="mainmenu">
<li>Choose the first map <i class="arrow"></i>
<ul>
<li>Category 1<i class="arrow"></i>
<ul>
<li class="div1clear" id="firstIDtoDisplay" data-path="contents/work/cycling1.html">% of employees cycling to work</li>
</ul>
</li>
<li>Ethnic maps<i class="arrow"></i>
<ul>
<li class="div1clear" id="secoundIDtoDisplay" data-path="contents/ethnic/white_british1.html">% of White British residents</li>
<li class="div1clear" id="thirdIDtoDisplay" data-path="contents/ethnic/white_tot1.html">% of White residents</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>

Specify the id attribute of the click li using $(this), and return false to cancel any propagation and the default behaviour of li
<script type="text/javascript">
$("#mainmenu li").click(function(e) {
alert($(this).attr('id'));
return false;
});
</script>
Demo: http://jsfiddle.net/ptx2hwy3/

Keep the parent menu highlighted when I click on its child menu

I want to implement a menu in my website.
I need to highlight a parent menu while I click on its child menu.
When I click on the parent menu, it is highlighted. But when I click on the child menu then its parent is not highlighted.
Here is my code. Please help me.
<html>
<head>
<script>
$(document).ready(function(){
$(' #menu-wplook-main-menu').find('li a').click(function(){
$(' #menu-wplook-main-menu').find('li a').removeClass('active');
if($(this).closest('ul').hasClass('sub-menu')){
$(this).parents('li ').addClass('active');
//this is a parent element
}else{
$(this).addClass('active');
}
});
});
</script>
<style>
#menu-wplook-main-menu li a.active{
color:#e53b51;
}
</style>
</head>
<body>
<script src="js/base.js"></script>
<div class="wrapper">
<p class="site-title"><img src="images/logo/iab_logo.png" alt="Indian Association for the Blind" title="Indian Association for the Blind"></p>
<nav class="navigation"id="nav">
<ul id="menu-wplook-main-menu"class="parent" >
<li class="menu-item">WHO WE ARE
<ul class="sub-menu"id="sub-menu1">
<li class="sub-menu-item1"id="sub-menu-item1">ABOUT FOUNDER</li>
<li class="sub-menu-item2">ABOUT IAB</li>
<!--<li class="menu-item ">TEAM IAB</li>-->
</ul>
</li>
<li class="menu-item current">WHAT WE DO
<ul class="sub-menu"id="sub-menu2">
<li class="sub-menu-item3 ">EDUCATION</li>
<li class="sub-menu-item4">CAREER & SKILL TRAINING</li>
<li class="sub-menu-item5">RESIDENTIAL SERVICES</li>
<li class="sub-menu-item6">SUPPORT SERVICES</li>
<li class="sub-menu-item7">EMPLOYMENT</li>
</ul>
</li>
<li class="menu-item">AWARDS & RECOGNITION</li>
<li class="menu-item4">NEWS & EVENTS</li>
<li class="menu-item5">CONTACT</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</body>
</html>

here's a working fiddle: http://jsfiddle.net/KPET6/
javascript changes:
$(document).ready(function () {
$('#menu-wplook-main-menu').find('li a').click(function () {
$('#menu-wplook-main-menu').find('li a').removeClass('active');
$(this).addClass('active');
$($(this).closest('li.menu-item').children()[0]).addClass('active');
});
});

Try this fiddle
Jquery changes:
$(document).ready(function(){
$('li a').click(function(){
$('li').removeClass('active');
$(this).parents("li").addClass('active')
});
});
CSS changes
#menu-wplook-main-menu li.active > a{
color:#e53b51;
}

Working fiddle: http://jsfiddle.net/WhqxD/1/
JS:
$(document).ready(function(){
$(' #menu-wplook-main-menu li a').click(function(e){
e.preventDefault();
$(' #menu-wplook-main-menu li a').removeClass('active');
$(this).closest('li.menu-item').find("a:eq(0)").addClass('active');
$(this).addClass('active');
});
});