Develop Reference

Unable to add active class to current selected menu using jquery

I wanted to make current selected menu highlighted using jquery
Following is my jquery code
$('ul li a').click(function() {
$('li').removeClass();
$(this).parent().addClass('active');
});
.active {
background-color: #d90000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
Meeting Overview
Meeting Details
</div>
</ul>
Please help

$('ul li a').click(function() {
//$('li').removeClass();
//$(this).parent().addClass('active');
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass("active");
});
.active {
background-color: #d90000;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
<li> Meeting Overview </li>
<li> Meeting Details </li>
</div>
</ul>

If you are trying to make sub menu use this
$(document).ready(function(){
if (localStorage.getItem('current_page')) {
var page = localStorage.getItem('current_page');
$('ul li').removeClass('active');
$('ul li[data-page="'+page+'"]').addClass('active');
}
});
$('ul li > a').click(function() {
$('li').removeClass('active');
$(this).parent().addClass('active');
var page = $(this).parent().attr('data-page');
localStorage.setItem('current_page', page);
});

In your code, $(this).parent() is your <li> element only when you click your first link, links under dropdown-content div have not an <li> parent, so, the removeClass() function is not working as you expected.
Please, changethis and tell us if your code works as you expect.

Try this
$('ul li a').click(function() {
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass("active");
});
ul li{
list-style-type:none;
float:left;
display:inline-block;
margin:0 10px;
padding:5px;
}
ul li.active{
background:pink;
}
li a{
text-decoration:none;
outline:0;
}
ul li.active a{
color:#000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="dropdown">
Menu1
</li>
<li class="dropdown">
Menu2
</li>
</ul>

This can´t work as expected. The problem is, you click the link () the current li elemet gets the class "active" and then the page refreshes because the link redirects you, which removes the active class from the current li element.
What you can do is teh following:
Option 1: Get the current path from the url
When the page gets loaded, you can extract the path and add the active class to the li that contains the link:
$(document).ready(function() {
var currentPath = window.location.pathname;
$('a[href="'+currentPath+'"]').partent().addClass("active");
});
This will find the link with the currentPath and add the class active to the corresponding li element.
You also need to wrap all links in separate list-elements:
<ul>
<li class="dropdown">
Meetings
<div class="dropdown-content">
<ul>
<li>Meeting Overview</li>
<li>Meeting Details</li>
</ul>
</div>
</li>
</ul>
Option 2: Add the active link name as Query Param
You can append a query param to your links like this:
<li class="link home">
Meeting Overview
</li>
<li class="link usermeetings">
Meeting Details
</li>
In your javascript you can then get the page param and add the active class like this:
$(document).ready(function() {
var page = $.url().param('page');
$('.link').find('.' + page).addClass('active');
});

Menu : expand child UL on parent LI click and disable link

I want to open child UL on parent LI click. Problem is that i have links to subpages on parent LI, which needs to be disabled so they don't redirect to subpage, but rather to expand child UL. Where there is no child UL, links on parent LI work normaly.
Code bellow works for disabling default URL and expands child UL, but it also disables child UL LI URL's, which should not.
So when i click on "No child" it should send me to yahoo, but when i click on Yes child it should expand child UL.sub-nav and links in .sub-nav li should work normaly.
Hope it's clear enough
Here's HTML
<nav>
<ul>
<li>No child</li>
<li>Yes child
<ul class="sub-nav">
<li>submenu1</li>
<li>submenu2</li>
</ul>
</li>
<li>No child</li>
</ul>
</nav>
and JS
$("nav ul li ul").css("display", "none");
$("nav li a").click(function (e) {
e.preventDefault();
$(this).next('ul').slideToggle();
});
Fiddle here

You can target only anchor elements which has a ul to display
$("nav li:has(ul) > a").click(function(e) {
e.preventDefault();
$(this).next('ul').slideToggle();
});
nav ul ul {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<ul>
<li>No child
</li>
<li>Yes child
<ul class="sub-nav">
<li>submenu1
</li>
<li>submenu2
</li>
</ul>
</li>
<li>No child
</li>
</ul>
</nav>

How to create a simple jQuery tabs without jQuery UI?

When I click on the tab it then displays the content that is associate. I'm using # to do it. Here is what I have tried, but I don't know how to do the switching part, Can someone help please?
So when click tab1 to show tab1 content, and click tab2 to show tab2 content and so on.
$(document).ready(function () {
$('.tab-content:not(:first)').hide();
$('.tab-menu li a').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
});
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>
Edit, I prefer not to use jQuery UI or any plugins.

You're very close here, just a couple things:
1) I would suggest applying the "active" class to the parent <li> so your highlighting will be simpler to get at
2) Use the href of the clicked link to switch out the content, and I would use a class to hide/show content, however I will provide jQuery following your example of using the show() and hide() method. Either approach would work.
The final jQuery would be something like this:
$(document).ready(function() {
$('.tab-content').slice(1).hide();
$('.tab-menu li').eq(0).addClass('active');
$('.tab-menu li a').click(function(e) {
e.preventDefault();
var content = $(this).attr('href');
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
$(content).show();
$(content).siblings('.tab-content').hide();
});
});
It's working in a fiddle for reference: http://jsfiddle.net/yscbeaxh/

It's really hard to get tabs right. Your current code isn't too bad, but you will face hiccups eventually. I can't say what OTTOMH, but, you will ;).
For your current code, you need to take the href attribute from the click li, select the matching p (based on ID - it's handy that the href attr returns #tab-1, you can use that as your selector!), and show it. You'll also want to hide the other 'active' tabs, and remove the class from any 'active' li's too.
This code should do the trick.
$(document).ready(function () {
$('.tab-content:not(:first)').hide();
$('.tab-menu li a').click(function () {
$('.tab-menu li a.active').removeClass('active');
var tabDivId = $(this).attr('href');
$(this).addClass('active').siblings().removeClass('active');
$('p.tab-content').hide();
$(tabDivId).show();
});
});
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>

The solution is very simple.
First I gave all the tabs a display of none and the active class display:block;
Than with jquery I take the href value of the <a> you clicked and than use that as the selector to add class active to the right tab.
demo
html:
<ul class="tab-menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tabs">
<p id="tab-1" class="tab-content active">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>
</div>
css:
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
.tabs{
width:50%;
}
.tabs > p{
display:none;
}
.tabs .active{
display:block;
}
Jquery:
$(document).ready(function () {
$('.tab-menu li a').click(function () {
$('.tab-menu li a').removeClass('active');
$(this).addClass('active');
tab = $(this).attr('href');
$('.tabs .active').removeClass('active');
$(tab).addClass('active');
});
});

Add active class to nav links with exception for some li

I have ul.menu for which few li are styled differently, therefore those li dont need to add active class.
<ul class="menu">
<li id="1st" class="default">Text1</li>
<li id="2nd" class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
jQuery to add active class for first two links, except li.cross-out
$('ul.menu li').click(function(){
$('ul.menu li').removeClass('active');
$(this).not('cross-out').addClass('active');
});
What is wrong? Hope I was clear enough...

You forgot the class identifier before cross-out:
$('ul.menu li').click(function(){
$('ul.menu li').removeClass('active');
$(this).not('.cross-out').addClass('active');
});

The period makes all the difference. Then because you may have several other ul.menu elements on your page, you just want the one whose li was clicked to change:
$('ul.menu li').click(function(){
$(this).siblings('li.active').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
$('ul.menu li').click(function(){
$(this).siblings('li.active').removeClass('active');
$(this).not('.cross-out').addClass('active');
});
.active {
background-color:gray;
font-weight:bolder;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>
<ul class="menu">
<li class="default">Text1</li>
<li class="default">Text2</li>
<li class="cross-out">Text3</li>
</ul>

Jquery has a toggle class function
$("#td_id").toggleClass('default active');
related post jquery change class name

Showing right sub-ul of parent ul menu

i have this html menu:
<ul id='main'>
<li class='active current' id='lighty'>
<a href='/'>Lighty</a>
<ul>
<li class='sub'>
<a href='/'>Hem</a>
</li>
</ul>
</li>
<li id='community'>
<a href='/community'>Community</a>
</li>
</ul>
And this jquery:
$("#menu ul > li").mouseenter(function(){
id = $(this).attr("id");
$("#menu #main li").removeClass("active");
$(this).addClass("active");
}).mouseleave(function(){
id = $(this).attr("id");
menu.timers[id] = setTimeout(function(){$("#menu #main li#"+id).removeClass("active");}, 2000);
});
What i am trying to acomplish is that when i hover one of the li's in the main ul the child ul of that li should be displayed. and when i move the mouse out of the li or the child ul the menu should be visible for 2 seconds.
It works through the main li button but if on the child ul and move out it just disapears, it doesnt wait for two seconds.
The waiting two seconds is so you can go in to the menu if you accidentaly move the mouse out of it.
Can anybody help me to fix this error? Maybe you have a better solution?
Here is also a screenshot on how the menu looks if it helps:
screen shot under or click here

is this what you mean?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("ul#main > li").mouseenter( function(){
$("#main li").removeClass("active");
$(this).addClass("active");
}).mouseleave(function(){
setTimeout( function()
{
$("#main li").removeClass("active");
}, 2000);
});
});
//-->
</script>
<style type="text/css">
#main li ul {
display: none;
}
#main li.active ul {
display: inline;
}
</style>
<ul id="main">
<li id="lighty">
Lighty
<ul>
<li class="sub">
Hem
</li>
</ul>
</li>
<li id="community">
Community
<ul>
<li class="sub">
more
more1
more2
more4
</li>
</ul>
</li>
</ul>