I'm a little stuck here. I have a ul menu of links. When a user selects from this list, I'm calling up content from another page with ajax. I want to grab a data attribute (data-flag) from the selected anchor and add that attribute as a class to the div that holds the ajax content (#fourteen). The adding class piece is working fine. However, when a new item is selected from the ul menu, I can't seem to remove the other classes from the content div. With each click, it just adds more classes.
Here's my code.
<ul id="langtest" class="tp_lang2">
<li>English</li>
<li>中文(简体)</li>
<li>Nederlands</li>
<li>Français</li>
</ul>
<div id="fourteen" class="cn">
<div id="content">
<div class="main-content">Content being served up here.
</div>
</div>
</div>
<script>
jQuery("ul#langtest li a").click(function() {
jQuery('#fourteen').load($(this).attr("href") + " #content");
jQuery('#fourteen').removeClass.not(this).attr("data-flag");
jQuery('#fourteen').addClass($(this).attr("data-flag"));
return false;
});
</script>
You just need to remove all class in the element like so :
// remove all class
jQuery('#fourteen').removeClass();
// then add class name with data flag selected anchor only
jQuery('#fourteen').addClass($(this).attr("data-flag"));
DEMO(inspect element to see the class actually added & removed)
Your removeClass seems not perfect. Do it like below.
jQuery('#fourteen').removeClass();
On dynamically added element you have to use delegate event binding.
jQuery(document).on("click","ul#langtest li a",function() {
jQuery('#fourteen').load($(this).attr("href") + " #content");
//also change your removeClass code
jQuery('#fourteen').removeClass();
jQuery('#fourteen').addClass($(this).attr("data-flag"));
return false;
});
Related
I've got this simple accordion jQuery script that's almost there with what I need it for, but I'm struggling with one last thing. The animated bits work fine - i.e. if the corresponding content block is closed, it slides open, and vice versa.
Here's the jQuery code:
$('.accordion-heading').click(function(){
$(this).next().slideToggle(300);
$('.accordion-content').not($(this).next()).slideUp(300);
$('.accordion-heading.active').removeClass('active');
$(this).addClass('active');
});
I want to have an 'active' class on the heading, but I need it to be removed if the same element is clicked twice. At the moment, everything works fine if a non-active heading is clicked. If an already-active heading is clicked again, however, the content block collapses correctly but the heading retains its 'active' class.
All you need to do is remove the .active class from elements that aren't the current element (you can use the same $.not() method you are currently on another element), then $.toggleClass() the .active class on the clicked element.
$('.accordion-heading').click(function(){
$(this).next().slideToggle(300);
$('.accordion-content').not($(this).next()).slideUp(300);
$(this).toggleClass('active');
$('.accordion-heading').not($(this)).removeClass('active');
});
.accordion-content {
display: none;
}
.active {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-heading">heading</div>
<div class="accordion-content">body</div>
<div class="accordion-heading">heading</div>
<div class="accordion-content">body</div>
<div class="accordion-heading">heading</div>
<div class="accordion-content">body</div>
</div>
Instead of Adding the class and removing the class I suggest using .toggleClass() this way if the element has the class it will remove it and if it doesn't it will add it. If you want to have one of the accordions open manually give it the active class, and let your JS do the rest.
You could use 'toggleClass()' but I find its better to be more specific by checking if the item that was clicked has the class active. This way you can branch out and do other functions depending on the state:
$('.accordion-heading').click(function(){
var theHeading = $(this);
var theContent = theHeading.next();
var slideTimer = 300;
if(theHeading.hasClass('active')) {
$('.accordion-heading.active').removeClass('active').next().slideUp(slideTimer);
theContent.slideDown(slideTimer);
$(this).addClass('active');
} else {
theContent.slideUp(slideTimer);
$(this).removeClass('active');
}
});
I'm a newbie so i hope my question will have some logic :)
i wish to add a class "active" to "li" (in this case a portfolio filter item in the page) by clicking on a link from the nav menu.
the "li" is not a part of the nav menu, how do i assign a "li" with a class if the "li" is in the deep tree - it's a whole different part of my site.
the "li" is in:
<div class=""section"
<ul id="portfolio-filter" class="list-inline">
<li <--- the place i wish the "active" be added
i have checked other question but couldn't figure out how to implement the specific need.
thanks for the help
You have to create a listener for the link of the menu. In JQuery, to create a listener, you have the 'on' function.
Example :
$("myElement").on("click",function(){});
After that, add an id attribute for the 'li' tag.
For example:
<li id="myLI">
So, when the user will click on the link of the menu, it will go to the listener. And in the listener, you will do :
$("#myLI").addClass("active")
Don't forget to create the css class.
First you have to specify .active in your CSS.
.active {
//add styles here
}
Then using javascript you have to grab #myLI and set class .active to it using onclick event:
var element = document.getElementById("myLI");
element.onclick = function() {
element.setAttribute('class','active');
}
I have 5 a link items in a row, encapsulated within a h4 and the h4 within li element and the li within ul which it's finally nested in a nav element.
At the moment, the role of a (thanks to a very helpful example that I found here) when clicked is to change the content of the divs (that contain images and text).
What I would like to do in addition, is that when you click the link and the content changes, I would like a link to receive the "active" class, which has white color and certain other css attributes.
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
the function that swaps the content
<nav id="nav2">
<ul class="tabz">
<li><h4>Szenario 1</h4></li>
<li><h4>Szenario 2</h4></li>
<li><h4>Szenario 3</h4></li>
<li><h4>Szenario 4</h4></li>
<li><h4>Szenario 5</h4></li>
</ul>
</nav>
When the page loads, everything displays correctly. When I click the second link I would like the "active" class to be removed from first link and go to the sencond.
(The css of the active class is just some color and border differences.)
Thank you very much in advance.
Attach handler for those anchor tags by using the attribute starts with selector, since you are having href with same beginning. And by using the $(this) reference set the active class and remove the active class from all of its anchor siblings.
Try,
$('[href^="#tabs"]').click(function(){
$(this).addClass('active');
$(this).closest('.tabz').find('a').not($(this)).removeClass('active');
});
$('[href^="#tabs"]').click(function(e){
$(this).addClass('active').parents('li').siblings().find('a').removeClass('active');
});
With the markup you have, the clicked a element won't have any sibling, but its li parent will, so this code will work as expected, see here : DEMO
I have a jQuery driven side navigation menu that on click of a li loads a hidden div. When I click another li I just have a hide() function on every every other hidden div id. Ideally I am looking for a way to when I click a li, it shows the hidden div and hides the div that was there previously. I have to load each hidden div based on id, but I figure there is some way to hide the current content before I load the new div. Here is how I currently have it:
<ul>
<li id="overview" class="selector">OVERVIEW</li>
<li id="whyus" class="selector">WHY US</li>
<li id="clients" class="selector">CLIENTS & TESTIMONIALS </li>
<li id="staff" class="selector">MEET THE STAFF</li>
</ul>
jQuery(document).ready(function() {
jQuery("#overviewHidden").fadeIn();
jQuery("li#overview").addClass('active');
jQuery("li.selector").click(function () {
jQuery(this).addClass('active');
jQuery(this).siblings().removeClass('active');
});
jQuery("#overview").click(function(){
jQuery('#whyusHidden, #clientsHidden, #staffHidden').hide();
jQuery('#overviewHidden').slideDown();
});
jQuery("#whyus").click(function(){
jQuery('#overviewHidden, #clientsHidden, #staffHidden').hide();
jQuery('#whyusHidden').slideDown();
});
jQuery("#clients").click(function(){
jQuery('#overviewHidden, #whyusHidden, #staffHidden').hide();
jQuery('#clientsHidden').slideDown();
});
jQuery("#staff").click(function(){
jQuery('#clientsHidden, #overviewHidden, #whyusHidden').hide();
jQuery('#staffHidden').slideDown();
});
});
Instead of a hide() on all the div's , I would like to hide whatever the current div is. Thanks,
One solution is to add a class to all hidden div's like hidden-container then in your click handler use it to hide the elements instead of using hard coded ids.
Ex
jQuery("#whyus").click(function(){
var hidden = jQuery('#whyusHidden');
jQuery('.hidden-container').not(hidden).hide();
hidden.slideDown();
});
Also you can improve the solution by removing the individual click handlers
For this you need to add a class called hidden-container to each of these divs
jQuery("li.selector").click(function () {
var $this = jQuery(this);
$this.addClass('active');
$this.siblings().removeClass('active');
var hidden = jQuery('#' + this.id + 'Hidden');
jQuery('.hidden-container').not(hidden).hide();
hidden.slideDown();
});
because from what I can see the id of the hidden id is nothing but the clicked li's id + Hidden
Demo: Fiddle
You can simply toggle the active class name on or off when clicking your links, and hide the active div at the same time. Here is a working example http://codepen.io/lukeocom/pen/eFdjI
You can also improve your code by adding a class to the ul instead of each li. Then use individual class names on each li to select the hidden divs. You dont need to use <a> tags as you can assign a click function to the <li> tags just as easily.
$('.selector li').click(function(){
//hide current displayed div
$('.active').toggleClass('active').hide();
//get the class name of this item to select the hidden div.
var theId = '#' + $(this).attr('class');
//show the div, assign active class
$(theId).toggleClass('active').fadeIn(500);
});
hope this helps
i am trying to make a to do list app. When i click a span with class "check" then i want to apply a style. Then the class of the span will change to "uncheck". When click the uncheck then the previous style will restore. Here is the html and jquery what i have done so far.
Problem: Problem is when i first click the span it works The "uncheck" class get removed and "check" class get added. Then the second part not works. I suspect the second part don't working because the "check" class is not in the dom when document.ready() is runs.
Any help will be greatly appreciated! Thanks!
HTML:
<div class="note-body">
<ol>
<li>M2u category shown. M2u category shown M2u category shown M2u category shown.
<span title="Delete" class="delete"></span>
<span title="Task Done!" class="done"></span>
<span class="handle"></span>
<span class="handle"></span>
</li>
<li>M2u category shown</li>
<li>M2u category shown</li>
</ol>
</div>
jQuery:
$('.note-body ol li span.check').click(function(){
$(this).addClass('uncheck').removeClass('check');
$(this).parent().css({'text-decoration':'line-through', 'color':'#5b382e'});
});
$('.note-body ol li span.uncheck').click(function(){
$(this).addClass('check').removeClass('uncheck');
$(this).parent().css({'text-decoration':'none', 'color':'#5b382e'});
});
RESOLVED:
Had to use the live(); because i am adding dom dynamically. Here is the final code (placed the styles in classes):
$('.note-body ol li span.check').live('click', function(){
$(this).addClass('uncheck').removeClass('check');
$(this).parent().addClass('task-done').removeClass('task-notdone');
});
$('.note-body ol li span.uncheck').live('click', function(){
$(this).addClass('check').removeClass('uncheck');
$(this).parent().addClass('task-notdone').removeClass('task-done');
});
You are correct. Since the 'uncheck' class is dynamically added to the DOM, you need to use the jQuery live API. Try this:
$('.note-body ol li span.uncheck').live('click', function(){
$(this).addClass('check').removeClass('uncheck');
$(this).parent().css({'text-decoration':'none', 'color':'#5b382e'});
});
use jquery live or delegate as they are added runtime
http://api.jquery.com/live/
http://api.jquery.com/delegate/
Do you really need an uncheck class? Are there three states check, uncheck and 'nothing'? Getting rid of the uncheck class you could simplify your code.
I would do:
$('.note-body .some_other_identifier').live('click', function() {
$(this).parent().toggleClass('check');
});
Adding
.some_other_identifier {'text-decoration':'line-through'; 'color':'#5b382e'; }
.check .some_other_identifier { 'text-decoration':'none'; 'color':'#5b382e'; }
to your css.