Add class to element this element is child of? - javascript

I'm trying to add a class "active" to the li that was clicked on, however in my script, I'm retrieving the a that was clicked on since I'd like to retrieve the href of "". What's the script to do that?
<ul class = "tab-links">
<!-- Each tab is Anchored to its Contents -->
<li class = "active">Panel 1</li>
<li>Panel 2</li>
<li>Panel 3</li>
<li>Panel 4</li>
</ul>
<script type="text/javascript">
$(function ()
{
//Listen for tab-links clicks
$('.tab-panels .tab-links a ').on('click', function (e)
{
//Remove current active panelToShow
$('.tab-panels .tab-links li.active').removeClass('active');
//Make panelToShow link active
//??How do I addClass active to the li that was clicked on, when "this" refers to an "a" element?
//????$(this).addClass('active');
... })
}
</script> ...

You use parent
$(this).parent("li").addClass('active');

You can simply do:
$(this).parent('li').addClass('active');
This will add the class active to the nearest parent of the link which is a li

Related

Add active class to <li> and leave it after hover

I have this code
<script>
$("li").hover(
function () {
$(this).addClass('active');
},
function () {
$(this).removeClass('active');
}
);
</script>
In order to add class active to my li in a menu.
<ul class="list-first-level">
<div about="" typeof="" class="ds-1col entity entity-paragraphs-item paragraphs-item-modulo-de-enlaces-item view-mode-modulo_de_enlaces_01_d clearfix">
<li id="elm" class="active always">
Undergraduate programmes
<ul>
<li>
Law
</li>
</ul>
</li>
</div>
</ul>
I need to not remove the active class after Im not hover on the element.
Just use this:
$("li").hover(function(){
$(this).addClass("active");
});
Although, you will end up with many active LI and does not provide a good UX.
When you hover over an element, remove the 'active' class from all li elements then add it back to the current element. This still means that if the user moves away from the last, hovered element - that element will remain in an 'active' state.
<script type="text/javascript">
$("li").hover(
function () {
$("li").removeClass('active');
$(this).addClass('active');
}
);
</script>

How to add class to next parent li?

I want to add a specific class to next parent element (li) of link. For example I have active class on 'Home" tab but same time I also need 'new-class' to 'About' li.
Here is my markup
This is working for static class but when active class on link added dynamically, This is not working.
I tried this but not able to make working
$('li a').click(function() {
if ($(this).hasClass('active')) {
$(this).parent().next().addClass('active');
}
else{
$(this).parent().next().removeClass('active');
}
});
<ul>
<li><a class="active" href="">Home</a></li>
<li class="new-class">About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
I think this is what you want :
$('li a').click(function(e) {
e.preventDefault();
$(this).closest('ul').find('a.active').removeClass('active');
$(this).closest('ul').find('li.new-class').removeClass('new-class');
$(this).addClass('active');
$(this).parent().next().addClass('new-class');
});
.active{ color:red; }
.new-class a { color:blue; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li><a class="active" href="">Home</a></li>
<li class="new-class">About</li>
<li>Service</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
There is next() function
$(this).parent().next().addClass('active');
However this is not what you looking for. This adds a class to li. If you want to add the class to a inside that , you need
$(this).parent().next().find("a").addClass('active');
$(this).parent().next().addClass('active');
This will first get to the li of the anchor being clicked.
Then, it will select the next element in order which be the 2nd li in case the first li is clicked and then, we add the class to that element.
If I understand you correctly (on clicking a having class active add class new-class to subsequent li?), this should work:
$('.tab a').click(function() {
if ($(this).hasClass('active')) {
$(this).parent().next().addClass('new-class');
} else{
$(this).parent().next().removeClass('new-class');
}
});

add active class to main menu using javascript

I have searched a lot for adding active class to the parent menu using javascript.
I found many more examples but not a single one is working for me, below is my code
HTML
<div id="menu1" class="hmenu">
<ul>
<li>Item1
<ul>
<li>SubItem1
<ul>
<li>SubSubItem1</li>
<li>SubSubItem2</li>
</ul>
</li>
<li>SubItem2 </li>
<li>SubItem3
<ul>
<li>SubSubItem1</li>
<li>SubSubItem2</li>
</ul>
</li>
</ul>
</li>
<li>Item2</li>
<li>Item3
<ul>
<li>SubItem1
<ul>
<li>SubSubItem1</li>
<li>SubSubItem2</li>
</ul>
</li>
</ul>
</li>
</ul>
<br style="clear: left" />
</div>
My requirement is when i click on SubItem1 then both Item1 and SubItem1 should be active.
And when i click on SubSubItem1 then SubSubItem1 ,SubItem1 and Item1 should be active.
Means when click on any link then its all parent link and the same link should be active.
I have tried with this javascript code :
$(document).ready(function () {
$('.hmenu ul li ul').find('li').click(function () {
//removing the previous selected menu state
$('.hmenu').find('li.active').removeClass('active');
//adding the state for this parent menu
$(this).parents('li').addClass('active');
});
});
Actually i don't have any experience with javascript coding and unable to figure out the problem in my code.
Can anyone suggest me for the same.
The issue comes from .find('li').click().
As you use nestsed <li>, this will cause the event to be fired two times when you click on a child <li>. This causes problems. Can not you add the click() to <a> elements?
$(document).ready(function () {
$('.hmenu a').click(function () {
//removing the previous selected menu state
$('.hmenu').find('li.active').removeClass('active');
//adding the state for this parent menu
$(this).parents("li").addClass('active');
});
});
It works just fine: https://jsfiddle.net/6put8tdx/
Note that your page will be bumped to the top while clicking to a tab because of # anchor. If you want to prevent this, you may pass the event to the function .click(function (event) {...} and add event.preventDefault inside.
If you need the click target to be the LI element (as opposed to Delgan's answer)
you can use .not() over the targeted LI's parents to prevent messing with the bubbling event targets:
$(document).ready(function () {
$('.hmenu').find('li').click(function(event) {
event.preventDefault(); // Prevent page jumps due to anchors
var $par = $(event.target).parents("li"); // get list of parents
$(".hmenu .active").not( $par ).removeClass("active"); // not them
$(this).addClass('active'); // let the event propagation do the work
});
});
$(document).ready(function () {
$('.hmenu').find('li').click(function(event) {
event.preventDefault();
var $par = $(event.target).parents("li");
$(".hmenu .active").not($par).removeClass("active");
$(this).addClass('active');
});
});
.active > a{
background: gold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu1" class="hmenu">
<ul>
<li>Item1
<ul>
<li>SubItem1
<ul>
<li>SubSubItem1</li>
<li>SubSubItem2</li>
</ul>
</li>
<li>SubItem2 </li>
<li>SubItem3
<ul>
<li>SubSubItem1</li>
<li>SubSubItem2</li>
</ul>
</li>
</ul>
</li>
<li>Item2</li>
<li>Item3
<ul>
<li>SubItem1
<ul>
<li>SubSubItem1</li>
<li>SubSubItem2</li>
</ul>
</li>
</ul>
</li>
</ul>
<br style="clear: left" />
</div>
To better understand the above
The following example works out-of-the-box, and the clicked one and all it's LI parents get the "active" class.
Why? Cause the event target is li, means any li of .hmenu - so that click is attached to any of them, and clicking the subsub LI the event will propagate to the LI parents - triggering the same click behavior (this add class)!
$(".hmenu").on("click", "li", function(){
$(this).addClass("active"); // Wow! Event propagation rulez!!
});
But we need to remove existing .active and here it gets messy...
$(".hmenu").on("click", "li", function(){
$(".active").removeClass("active"); // triggered on every event bubble :(
$(this).addClass("active"); // leaving only the main parent with active class
});
That's caused by the concurrency that happens while the event bubbles and triggers the same actions for the parent elements.
One way to prevent that concurrency would be using a setTimeout of 1ms:
$(".hmenu").on("click", "li", function(){
$(".active").removeClass("active");
setTimeout(function(){ // Let the previous finish the bubbling mess
$(this).addClass("active"); // Yey! all fine! Every LI has the active class
}, 1);
});
But here the timeout of 1ms can lead to visual "blinking" issues.
Try this:
$(function () {
$("li a")
.on("click", function () {
$(this).toggleClass("active");
$(this).closest("ul").parent().children("li a").toggleClass("active")
.parent().parent().parent().children("li a").toggleClass("active");
});
});
fiddle
Traverse from the clicked element. And use toggleClass() to avoid the mundane checking if hasclass removeClass ...

How to Remove a Class from a Sibling of a Parent

I'm working with the off-canvas script from Foundation and it isn't working out of the box (of course) when I try to use the submenu options. I realized it wasn't adding a class (move-right) to the ul's of the li's in the off-canvas navigation. So I wrote a script to add that class which can be found here:
jQuery(document).ready(function() {
jQuery('ul.off-canvas-list li a').click(function() {
jQuery('ul.off-canvas-list li ul.left-submenu').addClass('move-right');
});
});
And here is how my HTML is structured:
<ul class="off-canvas-list">
<li class="has-submenu">Name 1
<ul class="left-submenu">
<li class="back">Back</li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</li>
<li class="has-submenu">Name 2
<ul class="left-submenu">
<li class="back">Back</li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</li>
<li class="has-submenu">Name 3
<ul class="left-submenu">
<li class="back">Back</li>
<li><a href="#"></li>
<li><a href="#"></li>
</ul>
</li>
...etc
</ul>
My problem is that my script is adding the class to ALL ul.left-submenu's instead of just the one directly under the li that I click on. I can't figure out how to add the class 'move-right' to only the 'ul.left-submenu' child of the parents li that I clicked on and remove the 'move-right' class from the other 'ul.left-submenu'
I thought maybe using the sibling() selector, but I wasn't quite sure how to implement that into my script. Any and all help is greatly appreciated.
Another issue has arose and that is being able to close the opened "ul.left-submenu" by clicking on the "Back" which comes before the other li's in each ul.left-submenu. I updated the HTML above to include the "" and also have provided the script below that I tried using that hasn't worked.
jQuery('li.back').on('click', function() {
console.log('close submenu');
jQuery('ul.left-submenu').removeClass('move-right');
});
The target element is the grandparent of the clicked element so you can use the closest method:
$('ul.off-canvas-list li a').click(function() {
$('.move-right').removeClass('move-right');
$(this).closest('ul.left-submenu').addClass('move-right');
});
you can add it directly to the clicked element by using this
jQuery(document).ready(function() {
jQuery('.left-submenu li a').click(function() {
jQuery('.left-submenu').removeClass('move-right'); // remove class move-right from every elements with class left-submenu
jQuery(this).parents('.left-submenu').addClass('move-right'); // add class move-right to the parent with class left-submenu of current element
});
});
Edit:
if in your updated code, you want to click only by a right after .has-submenu, you need this probably, so it didn't trigger on click for a inside .left-submenu
jQuery(document).ready(function() {
jQuery('.has-submenu > a').click(function() {
jQuery('.left-submenu').removeClass('move-right'); // remove class move-right from every elements with class left-submenu
jQuery(this).children('.left-submenu').addClass('move-right'); // add class move-right to the children with class left-submenu of current element
});
});
sorry for my mistakes not looking again for the code before posting it, because ul.left-submenu is in the same position with a and not it's children, you need to use .siblings to get ul.left-submenu, so change the code to this
jQuery(document).ready(function() {
jQuery('.has-submenu > a').click(function() {
jQuery('.left-submenu').removeClass('move-right');
jQuery(this).siblings('.left-submenu').addClass('move-right');
});
});
here's the working Example in Fiddle
Ok, so you want to add a class move-right to the ul.left-submenu that is directly under the has-submenu li that you clicked, right?
So:
$(document).ready(function() {
//Trigger the click only on the li's has-submenu
$('li.has-submenu').on('click', function() {
//Remove the class from other ul, if there's any
$('ul.left-submenu').removeClass('move-right');
//Finds the direct ul child using the '>' selector, and adds the class.
$(this).find('> ul.left-submenu').addClass('move-right');
});
});
The way you have your selector it targets all the ul.left-submenu elements you have, another way to target just the element clicked would be like this:
$('.off-canvas-list').on('click', 'ul.off-canvas-list li a', function (){
$('.move-right').removeClass('move-right');
$(event.target).closest('ul.left-submenu').addClass('move-right');
});
Your selector is too broad. If what you want to do is to add move-right to left-submenu when you click has-submenu, that's what you need to do:
$('.has-submenu').click(function() {
$(this).find($('.left-submenu')).addClass('move-right');
});
Fiddle: http://jsfiddle.net/x9zcav0p/
If you need to reset move-right, do this:
$('.has-submenu').click(function() {
$('.move-right').removeClass('move-right');
$(this).find($('.left-submenu')).addClass('move-right');
});
Fiddle: http://jsfiddle.net/x9zcav0p/1/
Updated markup:
For your updated markup, you can target the next() element after the anchor tag:
$('.has-submenu > a').on('click', function() {
$('.move-right').removeClass('move-right');
$(this).next().addClass('move-right');
});
Fiddle: http://jsfiddle.net/x9zcav0p/2/

Add css class to parent li and sub li

I have a submenu like below:
<ul id="main-menu" class="" style="">
<li class="root-level has-sub">
Menu 1
<ul>
<li>Sub-menu 1</li>
<li>Sub-menu 2</li>
</ul>
</li>
<li>Menu 2</li>
<li class="root-level has-sub"> <!-- here -->
Menu 3
<ul>
<li class="root-level has-sub"> <!-- add class 'opened' here and -->
Sub-menu 3
<ul>
<li>Sub-sub-Menu 1</li> <!-- this -->
<li>Sub-sub-Menu 2</li> <!-- when user click this or -->
</ul>
</li>
</ul>
</li>
What I would like to have is, when I click to the child, it will add 'opened' class to parent and highlight the clicked element. My code only success on Menu 1 and failed on Menu 3.
Notice that, in Menu 3, there are 2 parents for Sub-sub-Menu 1 and Sub-sub-Menu 2. So my question is, if i click on Sub-sub-Menu 1 or Sub-sub-Menu 2 it will highlight and add 'opened' class to 2 parents li above.
Note: I try to implement unlimited level of menu
Here is my full code Fiddle
I think you should use a different selector(for the click event). Look for all li>a pairs, corresponding to the submenu items, inside your #main-menu list
$('#main-menu li>a').click(function (e) {
e.preventDefault();
$('.active').removeClass('active');
$('.opened').removeClass('opened');
$(this).parent('li').addClass('active').parents('.root-level').addClass('opened');
//------------------------------------------------------^-----------------------------
// selects all parents with the 'root-level' class
});
Modifying the css to:
#main-menu .active {
background-color:#df0000;
color:#fff;
}
DEMO
you simply use the not: attribute in your closest() method to exclude all classes root-level
$(function () {
$('ul#main-menu li ul li').click(function (e) {
e.preventDefault();
//we search for the first ancestor of this which is a li
$(this).closest('li:not(".root-level")').addClass('active').siblings().removeClass('active');
$('.active:first').closest('ul').addClass('opened');
});
});
check the link http://jsfiddle.net/GEj4z/11/
If I understood correctly what was desired was being able to produce a menu like behavior and it is because of that I would like to present an alternate solution:
Sample Fiddle
$('#main-menu').on('click','li:not(.root-level)',function(e){
$('.parent').removeClass('parent');
$('.selected').removeClass('selected');
$(this).parents('li.root-level').children('a').addClass('parent');
$(this).children('a').addClass('selected');
});
In this solution the parent menus are highlighted and the clicked item is marked as selected again I wanted to share my POV of this problem. I hope it helps.
Inside your click event use $(this).parents('li') to get the top level parent li of the clicked element. I hope this helps.
I found the solution! my jquery is:
$(function () {
$('ul#main-menu li ul li').click(function (e) {
e.preventDefault();
$(this).closest('li:not(".root-level")').addClass('active').siblings().removeClass('active');
$(this).parents('li').addClass('opened');
$(this).closest('li:has(".root-level")').removeClass('active');
});
});
Here is my full code JSFiddle

Categories