It is possible if i have more links with the same class, on click add aditional class for active item? I have tried with jquery '.toggleClass()' but if i click on next link then both links has the same class
1
2
3
I have tried:
$('a').click(function() {
$('a').toggleClass('active');
});
You need to use this:
$('a').on('click', function(e) {
e.preventDefault();
$(this).toggleClass('active').siblings('a.active').removeClass('active');
});
So, when an anchor is clicked, toggle the active class on that given anchor, and remove the active class from all siblings which are anchors and have the active class.
Here's a fiddle
I don't see any class in your html, but I add some for a example. Try this:
html
<div class="menu">
1
2
3
</div>
jQuery
$('.menu a').click(function(){ //check thru all <a> elements inside .menu
$('.menu ').removeClass("active"); // remove all active class
$(this).addClass("active"); //put active in parent of <a> which was clicked
});
Use the addClass() method
$('.link').addClass('active');
Check this:
Demo: http://jsfiddle.net/RKjh7/1/
$('a').click(function(){
$(this).addClass('yourClass');
});
Upon clicking on one of the links, remove the active class from current link, and add to the link just clicked.
$('a').click(function()
{
$('.active').removeClass('active');
$(this).addClass('active');
});
First remove the active class from all link and then add it on the clicked element.
Try this :
jQuery('.link').click(function(e){
e.preventDefault();
var elem = jQuery(this);
jQuery('.link').removeClass('active');
elem.addClass('active');
});
Here is the demo
Related
I have my own drop down navigation working, so when a user clicks on one of the links a page overlay will appear. I just need when they click again the page overlay removes.
Here is my code to add the overlay
$('#nav li a').on('click', function(){
$('#page-overlay').addClass('active').siblings().removeClass('active');
});
And a working DEMO is here - http://dsm.fishtankcreative.co.uk/
I just need help for when a user clicks off the navigation the page overlay class disappear.
Thanks in advanced.
Use toggleClass()
$('#nav li a').on('click', function(){
$('#page-overlay').toggleClass('active').siblings().removeClass('active');
});
Note: I don't think there is a need to use .siblings().removeClass('active'), as you are not adding the active class to any other elements
I can not add class active in LI navigation menu where i click.
When i click on WHAT WE DO on home page it jump to what we do page so i need menu WHAT WE DO in what we do page to be active.
Here is my JSFIDDLE
JS
$( document ).ready(function() {
$( "#cssmenu a" ).click(function(e) {
e.preventDefault();
var navId = $(this).attr("href");
var str = '.' + $(this).attr('id');
$("html, body").animate({
scrollTop: $(navId).offset().top
}, 600);
$(str).show();
$(this).closest('ul').find('li').removeClass("active");
$(str).find('li').removeClass("active");
$(str).closest('ul').find('li').addClass("active");
});
});
You are using same id for multiple elements. Please remove it and use different Ids for different elements.
You can add active class using below jQuery :
$(str).find('[href="'+navId+'"]').closest('li').addClass("active");
instead of
$(str).closest('ul').find('li').addClass("active");
Working JSFiddle
Note : as active class has font color white hence it is not visible after adding active class to the li.
Updated Fiddle
You need to find li - a in what we do page to add the class.Change the last line to this,
$(str).find('ul li a#'+$(this).attr('id')).parent().addClass("active");
Or just
$(str).find('a#'+$(this).attr('id')).parent().addClass("active");
Note : Your markup has Duplicate IDs which is invalid.
Element IDs should be unique within the entire document.
I'm new to JQuery, I know this question is already answered in other posts but please help me on this,
How can i change the class of <li> tag if a link <a> is clicked?
<li class="link" id="home" >
Home
</li>
<li class="link" id="flt" >
FLT
</li>
This is what i have tried so far:
$('li').click(function() {
$("li.active").removeClass("active");
$(this).addClass('active');
});
Please explain me the answer, other posts that is similar to mine doesn't have that much detail so i really don't understand how they do that?
When you click on the element, the actual click target is the a element whose default action is to navigate to the resource specified in the href property.
In this case you are registering the click event in the li event, this handler is getting triggered because of event bubbling where an event happening in a descendant element will get bubbled upto the document root.
So the solution here is to prevent the default action of the click event(in this case the navigation of the a element) by calling the .preventDefault() on the event.
var $lis = $('li').click(function(e) {
$lis.filter(".active").removeClass("active");
$(this).addClass('active');
e.preventDefault()
});
Use the following script. http://jsfiddle.net/czG8h/
$('.link a').click(function() {
$("li.active").removeClass("active");
$(this).closest('li').addClass('active');
});
If you want to persist the active style across the page, then following code will do the trick for you:
$(document).ready(function() {
var pageTitle = window.location.pathname.replace( /^.*\/([^/]*)/ , "$1");
///// Apply active class to selected page link
$('.link a').each(function () {
if ($(this).attr('href').toLowerCase() == pageTitle.toLocaleLowerCase())
$(this).closest('li').addClass('active');
});
});
Use .closest to get to parent li and add the class active then use siblings to find other li and remove the class active, and use e.preventDefault() to prevent changing page.
$('li a').click(function(e) {
e.preventDefault();
$(this).closest('li').addClass('active').siblings('.active').removeClass('active');
});
DEMO
I would like to know if some one can improve my code... Using jQuery I'm trying to apply a class on the element we just click and disable this class on the other elements.
You will se in my code that I'm trying to apply a class on the I just clicked and remove all the class on the others elements.
But for the moment, I'm doing it the "easy and mega long way" as you can see in $("choice1-1").click(function()
Can some help me with a code that could detect all the others ID ?
Here my code for the moment
$(document).ready(function()
{
$('#stick-question-1').mouseenter(function()
{
$('#stick-choices-1').show();
});
$('#stick-choices-1').mouseleave(function()
{
$('#stick-question-1').show();
$('#stick-choices-1').hide();
});
$("choice1-1").click(function()
{
$(this).addClass('hover-etat');
$("#choice1-2").removeClass('hover-etat');
$("#choice1-3").removeClass('hover-etat');
$("#choice1-4").removeClass('hover-etat');
});
});
And my HTML is like this
<div id="stick-choices-1" class="stick-choices">
Under 3'9
4' to 5'2
5'3 to 5'7
5'8 and more
</div>
Just use:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
I've changed your initial selector, so that the click event is triggered by clicking any of the links within the #stick-choices-1 div element, it prevents the default action of clicking the link (assuming that you want the default to be stopped), removes the hover-etat class from any element that has that class, and then applies that class-name to the this element.
It may, though, make sense to restrict the scope in which jQuery searches for elements with the hover-etat class, to those elements within the same #stick-choices-1 element, rather than the whole document:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$('#stick-choices-1 .hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
Or:
$("#stick-choices-1 a").click(
function(e) {
e.preventDefault();
$(this).siblings('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
It will works fine :
$("#choice1-1").click(function(){
$(".stick-choices a").each(function(){
$(this).removeClass(".hover-etat");
});
$(this).addClass(".hover-etat");
});
This should do it, and registers this handler for all of the links.
$('#stick-choices-1 > a').click(function(ev) {
$(this).addClass('hover-etat').siblings().removeClass('hover-etat');
...
});
Note the use of .siblings() to ensure that only the links that are in the same group are affected, and without sending an unnecessary class change to the clicked link.
This click event will work for all of the choices:
$('.stick-choices a').click(function(e){
$(this).siblings('.hover-etat').removeClass('hover-etat');
$(this).addClass('hover-etat');
});
$("a", $("#stick-choices-1")).click(function(){
$(".hover-etat").removeClass('hover-etat');
$(this).addClass('hover-etat');
});
May be something like this?
$('div.stick-choices a').on('click', function(e) {
e.preventDefault();
$(this).addClass('hover-etat').siblings('a').removeClass('hover-etat');
});
Does anyone know how I can expand on the function at the moment, so that when one navigation is open, when the user clicks to open the other navigation, the navigation which is open presently collapses?
Please find the code below;
http://jsfiddle.net/N7xgC/
What you're currently doing is toggling the display of all elements with the sub class, so clicking on any link will display all of the sub menus. Instead, you want to hide all of the elements with the class sub that aren't a sibling of the link being clicked on, and then toggle only the element with the class sub that is a sibling of the link being clicked on.
$(document).ready(function() {
$('.main > li > a').click(function() {
var sibling = $(this).siblings('.sub'); // select the <ul> to exclude
$('.sub').not(sibling).hide(); // hide everything except that element
sibling.toggle(); // toggle that element
});
});
Updated jsFiddle
Updated your jsFiddle http://jsfiddle.net/N7xgC/6/
$(document).ready(function()
{
$('.main > li > a').click(function(event)
{
$('.main > li > ul').hide();
$(this).next().show();
});
});
Like this?
http://jsfiddle.net/foxbunny/N7xgC/10/
EDIT: A bit of a cleanup, with single click handler:
http://jsfiddle.net/foxbunny/N7xgC/11/