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-->

Regex for adding CSS class

I am trying to add and remove class using the following script to #menuElem tag:
<script type="text/javascript">
$('#menuElem li ul').each(function (){
$(this).addClass("fallback browse-experience-drop-down-width");
});
$('#menuElem li a').each(function (){
$(this).addClass("skew");
});
$('#menuElem li ul li a').each(function (){
$(this).removeClass("skew");
});
</script>
Ideally this should work, but not working, Is it possible to with regex replace?
See below the HTML that we are adding the class, you can find menuElem inside the HTML
<!-- Header zone -->
<!-- header -->
<div class="tenantHeade fs-headerfooter-widget">
<!---->
<header>
<div id="container" class="container">
<div class="logocont">website</div>
<!-- Mobile nav btn -->
<a class="nav-toggle" href="javascript:void(0);"><span class="ada-compliant visible-xs"></span></a>
<!-- Mobile user options (for anon and preferred visitors) -->
<a href="javascript:void(0);" class="member-toggle">
<span class="ada-compliant visible-xs"></span>
</a>
<!-- Main nav -->
<nav class="main-nav inactive">
<ul id="menuElem">
<li>
<span class="antiskew">Browse Experiences</span>
<ul>
<li>
website
</li>
<li>
Local
</li>
<li>
Voluntours
</li>
<li>
Welcome website
</li>
</ul>
</li>
<li>
<span class="antiskew">Become a Member</span>
</li>
<li>
<span class="antiskew">Daily Deals</span>
</li>
</ul>

No need to loop when using jQuery:
<script type="text/javascript">
$('#menuElem > li > ul').addClass("fallback browse-experience-drop-down-width");
$('#menuElem > li > a').addClass("skew");
$('#menuElem > li > ul > li > a').removeClass("skew");
</script>
Also, you should use the > sign to indicate direct children, then you probably don't need the removeClass line

jQuery sliding menu function

hi i have a unordered list menu, trying to make the sub-items slide down and up on clicking at the main items, i wrote a jQuery code that works but when click at open menu it close it and open again, but i was hoping it will just close it.
html
<div class="menuNav">
<ul>
<li><span>item_1</span>
<ul>
<li>sub-item_1-1</li>
<li>sub-item_1-2</li>
<li>sub-item_1-3</li>
<li>sub-item_1-4</li>
</ul>
</li>
<li><span>item_2</span>
<ul>
<li>sub-item_2-1</li>
<li>sub-item_2-2</li>
<li>sub-item_2-3</li>
<li>sub-item_2-4</li>
</ul>
</li>
<li><span>item_3</span>
<ul>
<li>sub-item_3-1</li>
<li>sub-item_3-2</li>
<li>sub-item_3-3</li>
<li>sub-item_3-4</li>
</ul>
</li>
</ul>
</div>
jQuery
$(document).ready(function() {
$('.menuNav ul li').click(function(){
$(this).parent().find('ul').slideUp("fast");
$(this).parent().find("li").removeClass('menuactive');
$(this).find('ul').slideDown("slow");
$(this).addClass('menuactive');
});
$('.menuNav ul .menuactive').click(function(){
$(this).parent().find('ul').slideUp("fast");
});
});

If the li has a class menuactive, call the slideUp() function and remove the class menuactive else call the slideUp() function on all uls, remove the class menuactive from all lis, call slideDown() on the one that was clicked and add the class menuactive to the one that was clicked.
$(document).ready(function() {
$('ul > li > ul').hide();
$('.menuNav > ul > li').click(function() {
if ($(this).hasClass('menuactive')) {
$(this).find('ul').slideUp('fast');
$(this).removeClass('menuactive');
} else {
$(this).siblings().find('ul').slideUp('fast');
$(this).siblings().removeClass('menuactive');
$(this).find('ul').slideDown('fast');
$(this).addClass('menuactive');
}
});
});
.menuactive {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menuNav">
<ul>
<li><span>item_1</span>
<ul>
<li>sub-item_1-1</li>
<li>sub-item_1-2</li>
<li>sub-item_1-3</li>
<li>sub-item_1-4</li>
</ul>
</li>
<li><span>item_2</span>
<ul>
<li>sub-item_2-1</li>
<li>sub-item_2-2</li>
<li>sub-item_2-3</li>
<li>sub-item_2-4</li>
</ul>
</li>
<li><span>item_3</span>
<ul>
<li>sub-item_3-1</li>
<li>sub-item_3-2</li>
<li>sub-item_3-3</li>
<li>sub-item_3-4</li>
</ul>
</li>
</ul>
</div>

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');
});
});

JQuery - Toggling divs with only selectors

If I have html such as:
<ul id="tags">
<li>
Toggle
<div>Content1</div>
</li>
<li>
Toggle
<div>Content2</div>
</li>
</ul>
How can I write a JQuery select/click event such that each link toggles the div below it?
$('#tags li a').click(function(){
$('#tags '+this.parent()+' div').slideToggle();
});
Tried something like that but its not giving me the results. Any help?

$('#tags li a').click(function(){
$(this).siblings("div").slideToggle();
});
or
$('#tags li a').click(function(){
$(this).next("div").slideToggle();
});

$('#tags li a').click(function(){
$(this).next('div').slideToggle();
});

[RE-EDIT]:
<script src="jquery.js"></script>
<ul id="tags">
<li style="display: none">
toggle
<div>Content1</div>
</li>
<li>
toggle
<div>Content2</div>
</li>
</ul>
<script>
$('ul li a').click(function(){
$("ul li").slideToggle('slow');
});
</script>
[OLD]:
<ul id="tags">
<li style="display: none">
<div>Content1</div>
</li>
<li>
<div>Content2</div>
</li>
</ul>
Toggle
<script>
$('.toggle').click(function(){
$("ul li").slideToggle('slow');
});
</script>