I have the following HTML:
<ul>
<li class="one">one</li>
<li class="two">two</li>
<li class="three">three</li>
</ul>
<div class="one">
Here's div one
</div>
<div class="two">
Here's div two
</div>
<div class="three">
Here's div three
</div>
<div class="one">
Here's another div one, just for kicks
</div>
Here's what I want to do: when you click on the li class="one", I want to add an "active" class to all divs with class="one". Then when you click on li class="two", it removes the "active" from the first div and puts it on div class="two". I've played around with a few different ways of doing this, but I'm having trouble coming up with an efficient way to do it for all lis and divs (there will eventually be 10 of them).
$('ul a').on('click',function(){
$('.active').removeClass('active');
$('div.'+$(this).text()).addClass('active');
});
Demo: http://jsfiddle.net/9RLa9/
Alternatively, if you want to use the parent class instead of the text of the link to trigger your changes:
$('ul li').on('click',function(){
$('.active').removeClass('active');
$('div.'+$(this).attr('class')).addClass('active');
});
Related
can you help me with an ideea how i could remove items from a list after i click an item? let's say i have a list with 5 items and i press on the 3rd item, i want item4 and item5 to be removed. I want to remove all items after the one clicked in the list.Here is an html
<div class="row bcrumb">
<div class="col-sm-12">
<ol class="breadcrumb">
<li class="item">Item1</li>
<li class="item">Item2</li>
<li class="item">Item3</li>
<li class="item">Item4</li>
<li class="item">Item5</li>
</ol>
</div>
</div>
Remove all list items after the clicked item:
$('.item').on('click', function(e) {
e.preventDefault();
$(this).nextAll().remove();
});
Codepen
You can use nth:child selector to remove any item from a list like this:
$('ul li:nth-child(4)').remove();
$('ul li:nth-child(5)').remove();
However the question is a bit vague as to whether you want only those items to be removed on clicking 3rd item all the time or it should be a generic rule for other li items as well.
Because of this I cannot suggest which click event you should hook into. However I show you how to hook into 3rd li click:
$('ul li:nth-child(3)').click(function) {
console.log("3rd item clicked");
});
I have one <div>, where there's a lot of <div>s inside of it, and every child <div> gotta an <a>(anchor tag).
so what i'm trying to do is attach click events to the a-tags.
It's been working with a ul listed of mine divs. but i need it to be divs.
working code below:
jQuery:
$('#filterOptions li a').click(function (e) {});
HTML:
<ul id="filterOptions">
<li class="active">All</li>
<li>Premier League</li></li>
</ul>
An what I've tried which also didn't work is:
jQuery:
$('#filterOptions div a').click(function (e) {});
HTML:
<div class="filterOptions">
<div class="col-md-1 col-md-offset-1">
All
</div>
<div class="col-md-2">
<a href="#" class="league2 ">Premier League>
</div>
</div>
Please help to me achieve it.
The issue is you have class filterOptions in html markup and you are using id # in the jQuery code. It should be like:
$('.filterOptions div a').click(function (e) {});
Firstly, I need to say that I'm pretty new to jQuery.
I have this situation: http://jsfiddle.net/dVf8m/
I've been wondering if there is a way to do the slideToggle simplier. Now I have two ids on menu elements (#trigger1 and #trigger2) and two ids on the hidden divs (#one and #two). This also results in double jQuery. Is it possible to avoid all the ids and make it simpler?
Another thing is that if I click on both menu elements (First and Second) both divs appear. I want only one of the hidden divs to be visible at one time? How can I force the first div to disappear when the other one is appearing?
Also, if I'd want to use fadeIn/fadeOut in this situation, how to do it when both of them use the .click event?
Change your code to something like below. Have a class for the div and add click listener to it. add any attribute to the div and give the id of the div to be toggled.
<div id="top">
<ul>
<li><span id="trigger1" class="toggler" data-item="item1">First</span></li>
<li><span id="trigger2" class="toggler" data-item="item2">Second</span></li>
<li>Third</li>
</ul>
</div>
<div class="hidden" id="item1">
<ul>
<li>Smthn</li>
<li>Smthn2</li>
<li>Smthn3</li>
</ul>
</div>
<div class="hidden" id="item2">
<ul>
<li>Apple</li>
<li>Orange</li>
<li>...</li>
</ul>
</div>
$(document).ready(function() {
$('.toggler').click(function(e) {
$("#"+$(this).attr("data-item")).slideToggle(500);
});
});
JSFIDDLE
HI I am trying to make a menu where items show up as they hover. I am quite new to jquery, css, etc. and I cant quite figure out what my problem is. Right now I do get my div to show up on hover, but instead of just one all of them show up.
How do I make the div tag of only the item I hover over show up.
Here is the fiddle:
<ul class="navi">
<li> <a class='light'>
Item1
<div class="hover-name" style="display:none">
Businesses
</div>
</a>
</li>
<li> <a class='light'>
Item2
<div class="hover-name" style="display:none">
Agencies
</div>
</a>
</li>
<li> <a class='light'>
Item3
<div class="hover-name" style="display:none">
Billing Plans
</div>
</a>
</li>
</ul>
http://jsfiddle.net/Samfr/
For example if I hover over Item1 then only Businesses would show up. Item2 only Agencies show up
Thank you
You are using the following to show the items:
$('.hover-name').show();
What this does is find everything within the doucment that has a class of .hover-name and does the show() function on it.
All you need to do is change the show line to be context aware:
$(this).find('.hover-name').show();
Using $(this).find('.hover-name') will find all the elements inside of what you hovered over with a class of .hover-name and show that, instead of showing all of them.
Additionally, if you wanted to hide the shown elements when you move over a new element, you could use the following:
$('.navi > li a.light').hover(function () {
$('.hover-name').hide();
$(this).find('.hover-name').show();
});
$('.hover-name').hide(); will hide everything with the class of .hover-name and then show the items inside the element you are currently over.
This code is going to hide the other elements:
$('.navi > li a.light').hover(function () {
$(this).parent().parent().find('.hover-name').hide();
$(this).find('.hover-name').show();
});
Fiddle
You can use the currentTarget of the event, which will return the element that was hovered, and you can use that to filter to only show the hover-name of that element:
$('.navi > li a.light').hover(function (e) {
$(e.currentTarget).find('.hover-name').show();
});
(http://jsfiddle.net/Samfr/4/)
I'm trying to change (better would be to add) a class name to multiple divs using an onmouseover function in another element. The two elements are not nested to each other so I can't (or at least don't) think I can use plain CSS to do so.
I'm simplifying the following code to make it easier to read. The actual html for the "items" is a little bit more nested. Hope this won't be an issue.
<ul id="buttons">
<li class="a">button a</li>
<li class="b">button b</li>
</ul>
<div id="items">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-b"></div>
<div class="item-a"></div>
<div class="item-b"></div>
</div>
So basically what I want to do is when I hover the "li" elements with the mouse the corresponding class in div "items" gets a class added to itself (so class "a" in buttons would add a class 'hover' to all the "item-a" classes, and so on).
I'm fairly new to JavaScript/jQuery. So far I managed to get it done using Id instead of class, but since ID must be unique it's not what I need. The code was:
onmouseover="document.getElementById('item-a').className = 'hover';"
This worked. Only one div (the first with that ID) but it worked, so I tried to change it from Id to ClassName but it didn't work.
onmouseover="document.getElementsByClassName('item-a').className = 'hover';"
and also, if the above code would work, it would change the class, while I'd prefer to add it (and then remove it with a onmouseout function)
for reference, among the lot of searching i did i also tried this link
Trigger the css:hover event with js
trying to adapt it to my situation:
$(window).load(function() {
$('.a').hover(function(){
$('.item-a').addClass('hover');
});
}
with no results.
I'd suggest:
$('#buttons li').hover(function(){
$('.item-' + this.className).addClass('hover');
},
function(){
$('.item-' + this.className).removeClass('hover');
});
JS Fiddle demo.
References:
addClass().
hover().
removeClass().
Finagle your markup a little bit and you can do it with plain CSS:
<ul id="buttons">
<li class="a">button a</li>
<li class="b">button b</li>
<li class="items">
<div class="item-a"></div>
<div class="item-b"></div>
<div class="item-b"></div>
<div class="item-a"></div>
<div class="item-b"></div>
</li>
</ul>
.a:hover ~ li .item-a {
background: red;
}
.b:hover ~ li .item-b {
background: blue;
}
Demo