This question already has answers here:
on click clone the li and show in a div
(2 answers)
Closed 9 months ago.
on click clone li with add it under li with a class clicked and on click on different li the previous clone should get removed
for eg: what i would like to achieve is on the click of <li><span>third</span></li> clone same li under ul with a class "clicked" <li class="clicked"><span>third</span></li> && when i click on other li like <li><h4>Fourth</h4></li> the old li with class clicked should get removed and new li of <li class="clicked"><h4>Fourth</h4></li> should get generated
$('li').click(function() {
$(this).each(function(i) {
$("<li>")
.append($(this).contents().clone())
.appendTo('#main-ul');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
<ul id="main-ul">
<li>First</li>
<li><div>Second</div></li>
<li><span>third</span></li>
<li><h4>Fourth</h4></li>
</ul>
This code is work for you if I understand what you want.
<script>
$('li').click(function() {
$(".clicked").remove();
$('li').each(function(){
if($(this).children().length==0)
{
$(this).remove();
}
})
$(this).each(function(i) {
$("<li>")
.append($(this).contents().clone().addClass("clicked"))
.appendTo('#main-ul');
});
});
</script>
When you clone the element into the ul (the same, but doesn't matter), give it the clicked class with .addClass at the same time.
You can then remove all the ".clicked" elements when you add your next entry.
$('li').click(function() {
// remove previous entry (does nothing if none)
$(".clicked").remove();
// add new entry with class
$(this)
.clone()
.addClass("clicked")
.appendTo('#main-ul');
});
.clicked { color: red; }
ul#main-ul > li { cursor: pointer; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>
<ul id="main-ul">
<li>First</li>
<li><div>Second</div></li>
<li><span>third</span></li>
<li><h4>Fourth</h4></li>
</ul>
Related
I have a list that when <a> element is clicked it changes the color. Now I need when other sibiling <a> is clicked it should remove the active class and add it to the clicked one.
$( function() {
$('a').click( function() {
$(this).toggleClass("selected").siblings().removeClass('selected');
});
});
.selected {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"/>
<ul>
<li>
<a>First</a>
</li>
<li>
<a>Second</a>
</li>
</ul>
I know that the code will work if I add .selected class to the li but I need to achieve it with the <a> tag. Is it possible?
On click remove the selected class from all a then add that class to the clicked one
$('a').click(function() {
$('a').removeClass('selected');
$(this).addClass('selected');
});
.selected {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li><a>First</a></li>
<li><a>Second</a></li>
</ul>
I have a simple bit of jQuery which toggles the class "active" to an li once clicked:
$('li').click(function() {
$(this).toggleClass('active');
});
What I then want to happen is have every other li in the list hidden (display: none) then when you click the active li again it removes the active class but sets all other li's to be visible again too. This is what I am struggling to achieve.
I've tried using an if statement within the click function to check if the "active" class exists and if it does setting all li's to hidden, and if it doesn't then setting the css to show them again, but this doesn't work.
Edit:
tilz0R's answer was almost what I was looking for, I just modified it slightly to suit my needs.
$('li').click(function() {
$(this).toggleClass('active').siblings().toggleClass('hidden');
});
The hidden class simply has display: none, so that all other li's are hidden apart from the one that was clicked, and then all are shown again on the second click of the active li.
You have to find siblings of current li element.
$('li').click(function() {
$(this).toggleClass('active').siblings().hide();
});
Simply use addClass, removeClass and show() / hide()
$('li').click(function() {
if ($(this).hasClass('active')) {
$('li').show();
$(this).removeClass('active');
} else {
$('li').hide();
$(this).addClass('active').show();
}
});
li {
cursor: pointer;
}
.active {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ol>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ol>
When you click any <li> tag, the all <li> tag will be hidden except selected <li>. And again click, then all <li> tag will show and remove the active class.
HTML:
<ul>
<li>first</li>
<li>second</li>
<li>third</li>
<li>forth</li>
</ul>
jQuery:
jQuery('ul li').click(function() {
if(jQuery(this).hasClass('active')) {
jQuery(this).removeClass('active');
jQuery('ul li:not(".active")').show();
} else {
jQuery('ul li').removeClass('active');
jQuery(this).addClass('active');
jQuery('ul li:not(".active")').hide();
}
});
$('.active').click(function() {
$(this).toggleClass('active');
$(this).toggleClass('active');
});
I know this is totally wrong but I'm new and trying to learn; What I'm trying to do is toggle the active class for the <li> onclick() really appreciate any help. Thankyou.
<ul class="nav nav-tabs">
<li role="presentation" onclick="toggleClass();">Hi</li>
</ul>
You need to create a function toggleClass
JS
Create a new function toggleClass which will accept the current clicked element
function toggleClass(elem) {
$(elem).toggleClass('active');
};
HTML
add toggleClass function to onclick handler & pass the current element as an argument
<li role="presentation" onclick="toggleClass(this);">Hi</li>
CSS
Create a class .active
.active {
background: yellow;
}
DEMO
What you need to do is set all other elements's classes to inactive,
$('.active').className = 'inactive';
$(this).className = 'active';
That top expression will affect all elements with the class and the bottom one will change the current clicked element.
try this:
$("nav li").click(function() {
$(this).toggleClass("active");
});
if only for <li> elements with active class
$("nav li.active").click(function() {
$(this).toggleClass("active");
});
This is not how Bootstrap is supposed to work. If you are using bootstrap, use their tab js component. more on it here
Basically you add a listener on those LI tags like this: (from the docs)
$('.nav.nav-tabs li').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
The way you did, you were toggling the state twice so in the end it would stay the same.
I think instead of $('.active').click(function()), you should target li click as
$( "li" ).click(function() {
$(this).toggleClass("active");
});
fiddle:
http://jsfiddle.net/wVVbT/142/
Here is a link for description about how to use .toggleClass.
toggleClass: Add or remove one or more classes from each element in the set of matched elements, depending on either the class's presence or the value of the state argument.
DEMO:
$('li').click(function() {
$(this).toggleClass('active');
})
ul li{
float: left;
margin-right: 20px;
}
.active {
background: #69a;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li> Link A</li>
<li>Link B</li>
</ul>
i am having a problem here despite googling for hours.
i have a menu which has submenus.
<div class="themenu">
<ul>
<li>Link 1 //Want to add class catactive here when the following submenu is active
<div class="thesubmenu">
<ul>
<li class="subcat-active">submenu1</li>
</ul>
</div>
</li>
</ul>
</div>
I tried using this query but its not happening.
$(document).ready(function(){
if($('.thesubmenu ul li').hasClass('subcat-active')){
$(this).parent('.themenu ul li').addClass('cat-active');
}
});
There are many ways to write this but there is no need to iterate (.each()) or use .hasClass() which slow down this simple call.
Simply select the li items with .subcat-active, then use closest('li') to find the closest li ancestor and add the class. You need to use .parent() first because closest() includes the starting element which is also a li.
$(document).ready(function(){
$('.thesubmenu ul li.subcat-active').parent().closest('li').addClass('cat-active');
});
http://jsfiddle.net/3ehvqzjh/1/
just do:
$(document).ready(function(){
$('.thesubmenu ul li.subcat-active').each(function(){
$(this).parent().closest('li').addClass('cat-active');
});
});
Demo: http://jsfiddle.net/bpkpn6b5/
Here is a DEMO
$(document).ready(function(){
if ($('.thesubmenu ul li').hasClass('subcat-active')) {
$('.thesubmenu ul li').parents('li:eq(0)').addClass('cat-active');
}
});
$(document).ready(function(){
$('.subcat-active').each(function () {
$(this).parents('li').eq(0).addClass('cat-active');
});
});
Working example
This question already has answers here:
How can I highlight a selected list item with jquery?
(4 answers)
Closed 7 years ago.
I have a question, what jQuery code need to be used, to highlight DIV in list on click? I have 8 Div's, I need to highlight one which is clicked, and when clicking on next one, previous is no longer highlighted.
Ok, So try this:-
JSFiddle- http://jsfiddle.net/dtzjN/198/
All you need to do is, have a common class in all the divs, on click, remove the color class from every other div, and add a color class to the clicked div.
<div class="divs">
Thumb1
</div>
<div class="divs">
Thumb1
</div>
<div class="divs">
Thumb1
</div>
<div class="divs">
Thumb1
</div>
JS
var addclass = 'color';
var $cols = $('.divs').click(function(e) {
$cols.removeClass(addclass);
$(this).addClass(addclass);
});
CSS
.color {
background-color: yellow;
}
source :- How can I highlight a selected list item with jquery?
Modified it as per requirement.
Try the below
$(document).ready(function() {
$Divs = $("div");
$Divs.click(function() {
$Divs.removeClass("highlight");
$(this).addClass("highlight");
});
});
.highlight {
background: green;
}
div {
display: block;
width: 100px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
<li>
<div>First Div</div>
</li>
<li>
<div>Second Div</div>
</li>
</ul>
http://jsfiddle.net/uf4jxn5y/
<ul>
<li><div>Html 1</div></li>
<li><div>Html 2</div></li>
<li><div>Html 3</div></li>
</ul>
And the JS
$(document).ready(function() {
$("li div").click(function() {
$("li div").each(function() {
$(this).css("background-color", "transparent");
});
$(this).css("background-color", "#ff3300");
});
});
You can try something like this maybe :
$('.mainDiv').on('click','.divs',function () {
$(this).parent().find('.divs').css('background-color', '');
$(this).css('background-color', '#00fff0');
});
http://jsfiddle.net/HABdx/649/