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 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();
});
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>
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/
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");
});
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.