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/
Related
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>
When the the div with .redactor class is clicked, check if it is already as the selected element.
If it is already selected then do nothing.
If it is newly selected then
Execute the initialize_redactor() for that current selected div,
And execute the destroy_redactor() if there was any div which was previously selected.
And while any of the .redactor div is selected, if clicked other than the .redactor div, then execute destroy_redactor() for the currently selected .redactor div.
Sample in codepen.io
html:
<div id="toolbar_wrapper">
<div id="toolbar">
</div>
</div>
<div id="content">
<div class="redactor">
<h1>Header</h1>
<p>Paragraph</p>
</div>
<div class="redactor">
<h1>Another Header</h1>
<p>Another Paragraph</p>
</div>
</div>
You should loop through every ".redactor" element and run destroy_redactor on the selected element:
$('.redactor').on("click", function() {
$(".redactor").each(function () {
if($(this).hasClass("selected"))
{
destroy_redactor(current_edit);
$(this).removeClass("selected");
}
});
$(this).addClass("selected");
current_edit = $(this);
initialize_redactor(current_edit);
});
I think you just need to add two more lines to your js
You will destroy ALL .selected AFTER you check if the redactor has a class of selected:
if (!$(this).hasClass("selected")) {
destroy_redactor($('.selected'));
Then, if it already has the class selected, remove that class
} else {
$('.selected').removeClass('selected');
Here's the codepen to try it out:
http://codepen.io/anon/pen/vNEBNv
I have got 2 rows of html.
One row contains plain html and another row contains ul li lists.
First case:
On page load I want to change the text color of row one depending on which li is active.
Second Case
On click any li from second row, I would like to change the color of first row html depending on what data I have clicked in second row.
My code
First row
<div class="horizontal-link">
<div class="test">
<h4 data-id="1">Text 1</h4> <!--So on page load I would like to change the color to red as related with row 2 ul li) -->
</div>
<div class="test">
<h4 data-id="2">Text 2</h4>
</div>
</div>
Second Row
<ul>
<li class="tab active" data-id="1">Text 1</li>
<li class="tab" data-id="2">Text 2</li>
</ul>
I have tried and created a jsfiddle as demo:
Any help is highly appreciated. Thanks in advance.
You can use .filter() or attribute-selectors to check the data-id like this
jQuery
$(function(){
//Adds class on load depending on which is active
$('.test h4[data-id="'+$('ul li.active').data('id')+'"]').addClass('active');
//Adds class on click
$('li.tab').on('click',function(){
$('.test h4').removeClass('active');
$that = $(this);
$('.test h4').filter(function(){
return $(this).data('id')==$that.data('id')
}).addClass('active');
//removes class on clickable li and adds to clicked
$(this).addClass('active').siblings().removeClass('active');
});
});
CSS
.test h4.active {
color:red;
}
You need to change the css so it checked the h4 if has the class active
DEMO
You can either change text color of div or h4 by adding active class.
For div with active class use below jQuery
$(document).ready(function ($) {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').closest('.test').addClass('active');
$("li.tab").click(function () {
$('.active').removeClass('active');
var id = $(this).attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').closest('.test').addClass('active');
});
});
DEMO
For h4, you need to change CSS like below
CSS :
.test h4.active {
color:red;
}
jQuery :
$(document).ready(function ($) {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').addClass('active');
$("li.tab").click(function () {
$('.horizontal-link h4').removeClass('active');
var id = $(this).attr('data-id');
$('.horizontal-link h4[data-id="'+id+'"]').addClass('active');
});
});
DEMO
Look at the JS fiddle here. I hope this will help you.,
Updated jQuery:
$(document).ready(function ($) {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4[data-id='+id+']').addClass('active');
$("li.tab").click(function () {
$('.horizontal-link h4').removeClass('active');
var id = $(this).attr('data-id');
$('.horizontal-link h4[data-id='+id+']').addClass('active');
});
});
JS Fiddle:
http://jsfiddle.net/v1v1tqzs/34/
There is a change in your CSS :-
.test .active {
color:red;
}
you wrote it as .test.active . There should be a gap . That's why on page load the color:red was not getting implemented .
YOUR UPDATED FIDDLE:
$(document).ready(function () {
var id = $('ul').find('.active').attr('data-id');
$('.horizontal-link h4').each(function () {
if ($(this).attr('data-id') == id) {
$(this).addClass('active');
return;
}
});
$("li.tab").click(function () {
var id = $(this).attr('data-id');
$('.horizontal-link h4').each(function () {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
}
});
$('.horizontal-link h4').each(function () {
if ($(this).attr('data-id') == id) {
$(this).addClass('active');
return;
}
});
});
});
Try this , code can be optimized
HTML:
<div class="horizontal-link">
<div class="test">
<h4 class = "1" data-id="1">Text 1</h4>
</div>
<div class="test">
<h4 class = "2" data-id="2">Text 2</h4>
</div>
</div>
<ul>
<li class="tab active" data-id="1">Text 1</li>
<li class="tab" data-id="2">Text 2</li>
</ul>
CSS :
.test.active {
color:red;
}
.tab {
cursor:pointer;
}
ul li.tab {
list-style:none;
display:inline-block;
width:50px
}
.active {
color:red;
}
JS:
$(document).ready(function () {
var id = $('ul').find('.active').attr('data-id');
if ($('.horizontal-link h4').attr('data-id') == id) {
$('.'+id).addClass('active');
}
});
$(".tab").click(function () {
$(".tab").removeClass('active');
$(this).addClass('active');
$('.horizontal-link h4').removeClass('active');
var id = $(this).attr('data-id');
$('.'+id).addClass('active');
});
http://jsfiddle.net/bDQt7/4/
This doesn't work, hello2 and hello3 won't show up. It has to do with the '#id can only be used once' ? Changing it to class doesn't work, how to fix this?
HTML
Toggle
<div id="menu" class="hidden">hello</div>
<div id="menu" class="hidden">hello2</div>
<div id="menu" class="hidden">hello3</div>
CSS
.hidden {
display: none;
}
.unhidden {
display: block;
}
JS
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
}
}
IDs must be unique.
Try this:
HTML:
<div class="hidden">hello</div>
<div class="hidden">hello2</div>
<div class="hidden">hello3</div>
JS:
$(document).ready(function(){
$("a").click(function(){
$("div").toggleClass("hidden unhidden");
});
});
Fiddle here.
A Jquery solution for you, I just replaced your id with another unique class. Just refer the code below to get a grip over it.
HTML
Toggle
<div class="xTest hidden">hello</div>
<div class="xTest hidden">hello2</div>
<div class="xTest hidden">hello3</div>
JQUERY
$("a").click(function(){
var xObj = $(".xTest");
if(xObj.hasClass("hidden"))
{
xObj.removeClass("hidden").addClass("unhidden");
}
else
{
xObj.removeClass("unhidden").addClass("hidden");
}
});
DEMONSTRATION
Why don't your wrap all your divs inside another div?
http://jsfiddle.net/bDQt7/7/
it has more sense to have menu and items inside it (I guess you need anchors and not divs inside the menu div)
That way you don't need jquery if you still don't know what it is.
<div id='menu' class='hidden'>
<a href='#'>menu</a>
<a href='#'>menu2</a>
<a href='#'>menu3</a>
</div>
I know this is going to be an easy thing to do for someone with javascript experience, but I'm drawing a blank.
I have a list of items:
<div id="left-side">
<ul>
<li><div>Item 1</div></li>
<li><div>Item 2</div></li>
</ul>
</div>
<input id="addElement" type="button" value="->"/>
<div id="right-side">
</div>
I would like to highlight(change the background color) the selected list item on the left and then on a click of the button, move the selected item to the right div, and finally changing the background color back.
I've seen this many, many times online. But can't for the life of me, come up with how to do it.
Something like this (jquery) should do the trick:
// make the items selectable by toogling an 'active' class
$('#left-side li').click(function() {
$(this).toggleClass('active');
});
// on click of the move button
$('#addElement').click(function() {
// get the items to move
var $items = $('#left-side li.active');
// remove their active state
$items.removeClass('active');
// append them to the right side list
$('#right-side ul').append($items);
});
As you can see the code is indeed pretty straigh forward.
I also set up a small example to demonstrate: http://jsfiddle.net/NbcS9/
edit:
If you only want to be able to only select a single item on the left, you could do something like this in stead:
// make the items selectable by toogling an 'active' class
$('#left-side li').click(function () {
// remove active class from all other items
$('#left-side li').not($(this)).removeClass('active');
// toggle the active class on the clicked item
$(this).toggleClass('active');
});
And the updated fiddle:
http://jsfiddle.net/NbcS9/1/
I'd start by adding an empty <ul></ul> to your right side div, then use this:
$('#left-side li').click(function () {
$(this).toggleClass('selected');
});
$('#addElement').click(function () {
$('#left-side li.selected').appendTo($('#right-side ul'));
});
jsFiddle example
You may try this
$(function(){
$('#left-side ul li').on('click', function(){
$(this).toggleClass('selected');
});
$('#addElement').on('click', function(){
$('#left-side ul li.selected').appendTo($('#right-side ul'));
});
});
DEMO.
Using pure JavaScript would be tricky to do this, but using JQuery you can do this sort of easily. Add click events to the two divs which would append the selected text of the other to itself. to get the selected data add a function like this:
function getSelectionText() {
var text = "";
if (window.getSelection) {
text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
text = document.selection.createRange().text;
}
return text;
}
Also, I would look into Jquery Draggable(). sounds like something that could relate to your desired end result. http://jqueryui.com/draggable/
css:
.highlighted { background: yellow; }
html:
<div id="left-side">
<ul>
<li><div>Item 1</div></li>
<li><div>Item 2</div></li>
</ul>
</div>
<input id="addElement" type="button" value="->"/>
<div id="right-side">
<ul></ul>
</div>
JS:
$('#left-side').find('li').on('click', function(event) {
$(this)
.siblings().removeClass('highlighted')
.end()
.addClass('highlighted');
});
$('#addElement').on('click', function(event) {
event.preventDefault();
$('#left-side').find('li.highlighted').appendTo('#right-side ul'));
});