Say I have a unordered list of item1, item2, item3, item4, each with a div around it.
<ul>
<div><li>item1</li></div>
<div class="current"><li>item2</li></div>
<div><li>item3</li></div>
<div><li>item4</li></div>
</ul>
I want that every time I click itemX, it loads itemX.html and give the div around itemX a current class attribute. Currently I'm writing 4 functions separately for four items, and they look almost the same. So how can I write a general function that just works on any itemX, loads itemX.html and changes its div's attribute? My current code seems so redundant.
Assuming that you've fixed the HTML problem(li should be sub element of ul). But still for such problem, you need to do:
$("li").click(function() {
$(".current").removeClass("current");
$(this).parent().addClass("current");
});
But the correct solution is :
HTML :
<ul>
<li>item1</li>
<li class="current">item2</li>
<li>item3</li>
<li>item4</li>
</ul>
JS:
$("li").click(function() {
$(".current").removeClass("current");
$(this).addClass("current");
});
And add some css to your li
Your HTML is invalid, which will continue to cause problems for you. Try adding css padding to your LI elements to increase the click area:
<style>
li { padding:10px; }
</style>
As to your question:
<ul id="targetElement">
<li data-contentName="item1.html">item one</li>
<li data-contentName="item2.html">item two</li>
<li data-contentName="item3.html">item three</li>
<li data-contentName="item4.html">item four</li>
</ul>
<script type="text/javascript">
$('#targetElement li').click(function(){ //for all li elements in #targetElement, do this on click
//remove the active class from the other li's
$('#targetElement li').removeClass('current');
//jQuery wrap the current li
var $this = $(this);
//add the class to the current li (the one that was clicked)
$this.addClass('current');
//get the name of the file to load
var fileToLoad = $this.data('contentName');
//then go about loading the file...
});
</script>
$("div li").on('click',function(){
$(this).siblings().removeClass("current");
$(this).load($(this).text() + ".html").closest("div").addClass("current");
});
Your question isn't clear, and your html isn't valid. so let me venture a guess at what your trying to do.
<ul class="pages"><li>item</li><li>item2</li><li>item3</li></ul>
$(function(){
$('ul.pages li').click(function(){
// load html - not user what you mean, so how ever your doing your page load.
$(this).addClass('someclass');
});
});
Is this what you where looking for?
Related
I have a page with a list of menu items consisting of internal anchors. I'm trying to add an .active class to the selected item. It seems to work on load but when clicking a new item in that same page it doesn't.
When clicking a new menu item, I would like to remove all other active classes and add this class to the clicked item.
Sounds pretty simple, but I can't make it work.
I created this Fiddle, but it doesn't show the issue correctly, since I can't add hashes to the url.
However, maybe someone can point me in the right direction.
JS:
function setActiveLinks() {
var current = location.pathname;
$('.bs-docs-sidenav li a').each(function() {
var $this = $(this);
// Get hash value
var $hash = location.href.substr(location.href.indexOf('#') + 1);
if ($this.attr('href') == '#' + $hash) {
$this.parent().addClass('active');
}
})
}
setActiveLinks();
$('#leftmenu li a').click(function() {
$('#leftmenu li').removeClass('active');
setActiveLinks();
});
HTML:
<ul class="nav bs-docs-sidenav">
<li>
Download
</li>
<li class="active">
What's included
<ul class="nav">
<li class="active">Precompiled</li>
<li>Source code</li>
</ul>
</li>
<li>
Compiling CSS and JavaScript
<ul class="nav">
<li>Installing Grunt</li>
<li>Available Grunt commands</li>
<li>Troubleshooting</li>
</ul>
</li>
</ul>
Thanks. :-)
You have wrong selector to bind click event on anchor element. also you don't need to call setActiveLinks() function(which sets class based on href) here.
You can use context of clicked anchor element to traverse to parent li and add class active in it:
var $navLIs = $('.nav li')
$navLIs.find('a').click(function() {
$navLIs.removeClass('active');
$(this).parent().addClass('active');
});
Working Demo
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/
I got the following structure: - nested UL
<ul>
<li>Category 1
<ul>
<li> Category 1.1</li>
<li> Category 1.2</li>
<li> Category 1.3</li>
</ul>
</li>
<li> Category 2
<ul>
<li>Category 2.1</li>
<li>Category 2.2</li>
<li>Category 2.3</li>
</ul>
</li>
<li>Category 3
<ul>
<li>Category 3.1</li>
<li>Category 3.2</li>
<li>Category 3.3</li>
</ul>
</li>
I've applied a rule with CSS:
ul{
list-style: none;
padding:0;
margin:0;
}
ul ul{
display:none;
}
which leaves only the MAIN category shown.
What i was trying to do is, whenever a user clicks on the Category 1/2/3, its <ul> will be visible. I've tried this code:
$(document).ready(function() {
$("ul li").click(function() {
$(this + "ul").Slidedown(800);
});
});
well, basically I was trying to select the <ul element that was inside the main <ul>.
How do I do it?
Try this.
$(document).ready(function() {
$("ul li").click(function() {
$(this).find('ul').Slidedown(800);
});
});
Given your selector, click on Category 1.1 will also call the callback, but it won't do anything since it doesn't have any ul tags. Still, it's better to add a class and bind the event only on those.
this is not a string, it's a DOM element.
Instead of $(this + "ul"), you want $('ul', this).
P.S. .Slidedown should be .slideDown.
$(this).find('ul:hidden').slideDown(800);
something like this should work
$(document).ready(function() {
$("ul > li").click(function() {
$(this).find("> ul").Slidedown(800);
});
});
Although, an even more efficient approach(thanks to Ian) would be:
$(document).ready(function() {
$("ul").children('li').click(function() {
$(this).children("ul").Slidedown(800);
});
});
using the '>' operator tells jquery to only look for direct children, if you don't use '>' the code will apply to the li elements inside the nested ul as well. also, read the other answers info about using 'this' properly.
You're concatenating the DOM element with "ul" to a string - that's not a valid selector. Instead, use .find() to apply the ul selector in the context of the current element.
$(document).ready(function() {
$("ul li").click(function() {
$(this).find('ul').Slidedown(800);
});
});
And maybe make the ul li selector a bit more specific to match only the outer list items.
I am a newbie in web development. Not sure if it is a dumb question.
<nav class="navigation">
<ul class="navigation-items-container">
<li class="navigation-items">Home</li>
<li class="navigation-items">about</li>
<li class="navigation-items">blog</li>
<li class="navigation-items">contacts</li>
</ul>
/nav>
On hover of each li I want to know its in which children Number of ul.
i.e
On hovering "Home" it should give as children Number 0 and on hovering "blog" it should give children number 2.
As you've included the jQuery tag I'll post a jQuery based answer - if you want a non-jQuery answer let me know:
$(".navigation-items-container li").hover(function(e) {
var index = $(this).index();
});
And FYI your markup is wrong, the anchors should be inside the li tags
The version for your current code (though it should be changed):
$(".navigation-items-container a").hover(function(e) {
var index = $(this).index();
});
Due to the fact that your li elements are within a elements, you should use this:
$(".navigation li").hover(function(){
var index = $(".navigation li").index(this);
alert(index);
});
Here is a working example
Of course, it would be better to have your a elements with the li elements like so:
<li class="navigation-items">Home</li>
That way the li elements will be direct children of the ul element, then you could do this:
$(".navigation li").hover(function(){
var index = $(this).index();
alert(index);
});
Here is a better example
Alternatively, and I am not saying this is better, but you could also use data-* attributes to store the value you want:
<li class="navigation-items" data-myindex="0">Home</li>
with this:
$(".navigation li").hover(function(){
var index = $(this).data("myindex");
alert(index);
});
This has the benefit that you could specify different values if required, such as record IDs for example.
Here is an example
Try this.
$('li').on('mouseover', function(){
console.log($('ul li').index($(this)));
})
Try index()
http://api.jquery.com/index/
$(".navigation ul li").hover(function(e) {
alert($(this).index());
});
More possiblities
this help you
Working Demo http://jsfiddle.net/cse_tushar/7SmfR/
$(".navigation ul li").hover(function() {
alert($(this).index('li'));
});
Correct your markup anchor(a) tag should be enclosed within li tags
<nav class="navigation">
<ul class="navigation-items-container">
<li class="navigation-items">
Home
</li>
<li class="navigation-items">
about
</li>
<li class="navigation-items">
blog
</li>
<li class="navigation-items">
contacts
</li>
</nav>
I'm working on a site and want to store a class in localStorage although I'm having some problems.
Here's the HTML:
<ul class="type">
<li id="1" class="current">Example 1</li>
<li id="2">Example 2</li>
</ul>
I have some jQuery that adds a class to one of the examples when clicked.
When the class current is active, it changes some values on the site. Basically, when you visit the site, #1 already has the class current but if I add the class the #2, I want localStorage to remember which element had the class current.
Here's what I've wrote so far of localStorage but I don't think it's right. (P.S. I'm using Modernizr).
function temp_type(){
var type = $('.type li').hasClass('current');
}
$('#1').click(function() {
$('#2').removeClass('current');
$(this).addClass('current');
if(Modernizr.localstorage) localStorage.setItem('temp_type'), $('.type li').hasClass('current');
});
$('#2').click(function() {
$('#1').removeClass('current');
$(this).addClass('current');
if(Modernizr.localstorage) localStorage.setItem('temp_type'), $('.type li').hasClass('current');
});
if(Modernizr.localstorage){
var type = localStorage.getItem('temp_type');
if(type){
$('.type li').hasClass('current');
temp_type();
}
}
Also, is there a way to test if localStorage is working or not?
This can be written in a simple way, try the below one
HTML
<ul class="type">
<li id="1">Example 1</li>
<li id="2">Example 2</li>
</ul>
<br />
Check Storage
Script
$(document).ready(function(){
$('.type li').on('click', function(event){
$('.type li').removeClass('current');
$(this).addClass('current');
if(Modernizr.localstorage){
window.localStorage['temp_type'] = $(this).attr('id'); /*Storing the id of the selected element*/
}
});
$('a').on('click', function(event){
alert(window.localStorage['temp_type']); /*Check the current storage*/
});
});
CSS
li.current {
color: red;
}
Demo JS http://jsfiddle.net/5vmBe/3/
Hope this will help you.