add/remove active class for ul list with jquery? - javascript

I'm trying to remove and set an active class for a list item every time it's clicked. It's currently removing the selected active class but isn't setting it. Any idea what I'm missing?
HTML
<ul class="nav nav-list">
<li class='nav-header'>Test</li>
<li class="active">Page 1</li>
<li>Page 2</li>
<li><a href="page3.php">Page 3</li>
</ul>
jquery:
$('.nav-list').click(function() {
//console.log("Clicked");
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});

this will point to the <ul> selected by .nav-list. You can use delegation instead!
$('.nav-list').on('click', 'li', function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});

you can use siblings and removeClass method
$('.nav-link li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
});

Try this,
$('.nav-list li').click(function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
In your context $(this) will points to the UL element not the Li. Hence you are not getting the expected results.

I used this:
$('.nav-list li.active').removeClass('active');
$(this).parent().addClass('active');
Since the active class is in the <li> element and what is clicked is the <a> element, the first line removes .active from all <li> and the second one (again, $(this) represents <a> which is the clicked element) adds .active to the direct parent, which is <li>.

In my case I have div element with same class. Now I added the active class on it using jquery check the code.
div element
<div class="previewBox" id="first_div">
...
</div>
<div class="previewBox" id="second_div">
...
</div>
<div class="previewBox" id="third_div">
...
</div>
jquery code
$(".previewBox").click(function () {
$(".previewBox.active").removeClass('active')
$(this).addClass('active')
});
css
.active {
background-color:#e9f1f5;
border-left:4px solid #024a81;
}
Demo
click_this

$(document).ready(function(){
$('.cliked').click(function() {
$(".cliked").removeClass("liactive");
$(this).addClass("liactive");
});
});
.liactive {
background: orange;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul
className="sidebar-nav position-fixed "
style="height:450px;overflow:scroll"
>
<li>
<a className="cliked liactive" href="#">
check Kyc Status
</a>
</li>
<li>
<a className="cliked" href="#">
My Investments
</a>
</li>
<li>
<a className="cliked" href="#">
My SIP
</a>
</li>
<li>
<a className="cliked" href="#">
My Tax Savers Fund
</a>
</li>
<li>
<a className="cliked" href="#">
Transaction History
</a>
</li>
<li>
<a className="cliked" href="#">
Invest Now
</a>
</li>
<li>
<a className="cliked" href="#">
My Profile
</a>
</li>
<li>
<a className="cliked" href="#">
FAQ`s
</a>
</li>
<li>
<a className="cliked" href="#">
Suggestion Portfolio
</a>
</li>
<li>
<a className="cliked" href="#">
Bluk Lumpsum / Bulk SIP
</a>
</li>
</ul>;

Related

How can I select elements having specific siblings?

How can I prevent anchor (<a>) tag from doing nothing if li has ul according to the following code:
<aside class="sidebar">
<div id="leftside-navigation" class="nano">
<ul class="nano-content">
<li>
<a href="index.html">
<span>Home</span>
</a>
</li>
<li class="sub-menu">
<a href="javascript:void(0);">
<span>Categories</span>
<i class="arrow fa fa-angle-right pull-right"></i>
</a>
<ul>
<li>
<a href="index.html">
<span>Home</span>
</a>
</li>
<li>
<a href="index.html">
<span>Lifestyles</span>
</a>
</li>
<li>
<a href="index.html">
<span>Technology</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
I've tried to put javascript:void(0) - it works but I wanted to make it with if else statement or any other way.
I wanted to do that is:
if li.submenu has ul li.has-submenu a prevent default
You can write a selector for a that's a child of an li that has a submenu.
$("li:has(ul) > a").click(function(e) {
e.preventDefault();
});
Another approach would be to not include the <a> tag in general. Just write the the text "Categories" within the <li class="sub-menu> and it will display in menu as normal.
Example:
<li class="sub-menu">
<span>Categories</span>
<i class="arrow fa fa-angle-right pull-right"></i>
<ul>
<li>......
Although you would need to add CSS if you want the cursor to change or if you want the text to be underlined for your <span> etc...
You can also try this.
$("li").find("ul > a").click(function(e) {
e.preventDefault();
});

jQuery: Only affect elements with a certain class that are children of another element

I have a jQuery function that toggles a drop-down navigation menu by changing its class on click:
$(function () {
$('.nav-titles').on('click', function() {
$('.nav-dropdown').toggleClass('nav-dropped-down');
});
});
<nav>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
</nav>
The problem is that it changes the class of all drop-down menus instead of just the one whose button was clicked. Can I do anything so it only changes the .nav-dropdown that is directly under its .nav-titles button?
Added the HTML structure as requested.
You need to find parent li element, and look for the dropdown class on it:
$('.nav-titles').on('click', function() {
$(this).closest('li').find('.nav-dropdown').toggleClass('nav-dropped-down');
});
The thing is that you can't click on the nav-titles class because it wrapped by its li parent, so you must select the li tag for the click & not the nav-titles class, then search for the nav-dropdown class inside of it.
$(function () {
$('.nav-titles').on('click', function() {
$(this).closest('.nav-dropdown').toggleClass('nav-dropped-down');
});
});
$('li').on('click', function() {
$(this).find('.nav-dropdown').toggleClass('nav-dropped-down');
});
.nav-dropped-down
{
height:20px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
<li>
<a class="nav-titles"></a>
<div class="nav-dropdown"></div>
</li>
</nav>

how to add or remove class from html elements with jQuery

I was trying to add class on a current <a></a> and wanted to remove that active class from other <a></a>. i was trying
MY FIDDLE
HTML
<ul>
<li>
<a href="#" class="active">
Home
</a>
</li>
<li>
<a href="#">
About
</a>
</li>
<li>
<a href="#">
Service
</a>
</li>
</ul>
jQuery
$('ul li a').click(function(e){
e.preventDefault();
$(this).addClass('active').siblings().removeClass('active');
});
$('ul li a').click(function(e){
e.preventDefault();
$('ul li a').removeClass('active')
$(this).addClass('active');
});
.active{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<a href="#" class="active">
Home
</a>
</li>
<li>
<a href="#">
About
</a>
</li>
<li>
<a href="#">
Service
</a>
</li>
</ul>
jQuery
You can remove all the active class from anchor then add the active class to clicked anchor
a element in your code has no sibling in parent li
Use $('ul li a.active') selector and remove all active classes and then apply active class over current element
$('ul li a').click(function(e) {
e.preventDefault();
$('ul li a.active').removeClass('active')
$(this).addClass('active');
});
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li>
<a href="#" class="active">
Home
</a>
</li>
<li>
<a href="#">
About
</a>
</li>
<li>
<a href="#">
Service
</a>
</li>
</ul>
You need to find the a tag elements which are not the direct sibling but the children of the current a tag element parent siblings.
use the below code to find the a tag elements which are the children of the clicked a tag element's parent li sibling
$(this).addClass('active').parent("li").siblings("li").children("a").removeClass('active');
updated fiddle : https://jsfiddle.net/Lwzu738a/1/

How do I toggle a class on click of an element but remove the same class from all other elements using JQuery?

I'm trying my best to word this properly so please bear with me. So I'm trying to only toggle a class (active) on an element that is clicked. If another element is clicked I would like to add the class "active" to the element clicked and remove the active class from any other element.
The problem is when I click on one element the "active" class is added but then when I click on another element the "active" class isn't removed from the other elements
$("li.test a").click(function() {
$(this).toggleClass("active");
});
$("li.test a").click(function() {
$(this).toggleClass("active");
});
$("li.test a").click(function() {
$(this).toggleClass("active");
});
HTML
<li class="test1">
<a href="#" class="">
</li>
<li class="test1">
<a href="#" class="">
</li>
<li class="test1">
<a href="#" class="">
</li>
<li class="test2">
<a href="#" class="">
</li>
<li class="test2">
<a href="#" class="">
</li>
<li class="test2">
<a href="#" class="">
</li>
Here's the working code:
$("li.test a").on("click",function() {
if($(this).hasClass("active")){
$(this).removeClass("active");
} else{
$("a.active").removeClass("active");
$(this).addClass("active");
}
});
.active{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
(Working pen)
Be aware you have classes "test1" and "test2" in the HTML, but class "test" in the JS!
Use the not method to skip your current element.
$("li.test a").click(function() {
var $this = $(this);
$('.test a').not($this).removeClass('active');
$this.toggleClass("active");
});
You have to remove the class from other elements before toggling.
Try this
$("li.test a").click(function() {
$("li.test a.active").removeClass("active");
$(this).toggleClass("active");
});
This first removes all the anchors with class active and then toggles the clicked anchor with the class.
Try this.
$("li").click(function(){
$(this).siblings().removeClass('active');
$(this).addClass('active');
})
li.active a{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="test1 active">
test
</li>
<li class="test1">
test
</li>
<li class="test1">
test
</li>
<li class="test2">
test
</li>
<li class="test2">
test
</li>
<li class="test2">
test
</li>
</ul>
Go through below mentioned link or below mentioned code may be it can help you.
JSFiddle
HTML Code
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
<li class="test">
test
</li>
CSS Code
.active{
color:#00adef;
}
JAVASCRIPT Code
$("a").click(function(){
$('a').removeClass('active');
$(this).addClass("active");
});

How to add active class only on second level of the navigation

I have an vertical navigation with two levels.
What I want is when I press the main li to add active and open class just to the main li and when I press on the sub-menu I want to add active just to that li. Here is my code:
HTML
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="start active open">
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="active">
<a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li>
<a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li>
<a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li>
<a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
</ul>
JS
$(".sub-menu li").on("click", function() {
$(".sub-menu li").removeClass("active");
$(this).addClass("active");
});
$(".page-sidebar-menu li").on("click", function() {
$(".page-sidebar-menu li").removeClass("active open");
$(this).addClass("active open");
});
You have to target the closest li inside class .page-sidebar-menu
$(".sub-menu li").on("click", function() {
$(".sub-menu li").removeClass("active");
$(this).addClass("active");
});
$(".page-sidebar-menu > li").on("click", function() {
$(".page-sidebar-menu > li").removeClass("active open");
$(this).addClass("active open");
});
i'm not sure if i understood exactly what you asked.
But, from what i get i remade your html a bit (added a menu class to bind the click event more precisely)
<ul class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<li class="menu start active open"> <a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li class="active"> <a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li> <a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
<li class="menu"> <a href="javascript:;">
<i class="icon-home"></i>
<span class="title">Rezervari</span>
<span class="arrow "></span>
</a>
<ul class="sub-menu">
<li> <a href="#">
<i class="icon-bar-chart"></i>
Vezi rezervari</a>
</li>
<li> <a href="#">
<i class="icon-bulb"></i>
Istoric rezervari</a>
</li>
</ul>
</li>
</ul>
And so my version of your jQuery looks like that :
$(document).ready(function () {
// added a menu class to bind the click event more precisely
$(".menu > a").on("click", function () {
// nothing is active but this
$(".active").removeClass("active");
// and close the other menus
$(".menu").removeClass("open");
$(this).parent().addClass("active open");
});
$(".sub-menu li").on("click", function () {
// nothing is active but this
$(".active").removeClass("active");
$(this).addClass("active");
});
});
The CSS i used to test it was just this :
.menu { display: block; }
.sub-menu { display: none; }
.open, .open .sub-menu { display: block; }
.active { text-transform: uppercase; }
For an example, go check that jsfiddle that i made to answer you (really basic css here) and tell me if that's what you asked for.

Categories