I am having a problem using jQuery, merely due to inexperience using it. My program is meant to give the CSS class current to the links in my navbar if they are clicked, and remove the class from the previous owner of it.
Keep in mind I am very inexperienced in javascript, only picking it up in a few minutes for the sake of a school assignment.The script is simply not doing anything.
My Code:
$(document).ready(function() {
$('a').click( function(i){
var $current = $('a.current');
$(this).addClass('current');
$current.removeClass('current');
});
});
Edit 1: Strange bug, current class is applied to the whole document if I do not click a link, but instead click the document.
You should first remove the class, and then add it. Otherwise you will not have a class added if you click an anchor twice.
$(function() {
$('a').click(function() {
$('a.current').removeClass('current');
$(this).addClass('current');
});
});
Try this:
$current.removeClass('current');
$(this).addClass('current');
You need to first remove the active class, then add the current class for the current element.
You need to narrow down your code to only affect the links in the nav bar, as currently, you are targetting all <a> tags.
var navLink = $('.nav a');
navLink.on('click', function(e){
navLink.removeClass('current');
$(this).addClass('current');
});
In this code, the variable gets all instances of the nav links, and if one of them is clicked, will remove the current class from all of the links before adding it onto the one that was clicked.
This jsfiddle will show you it in action: https://jsfiddle.net/td48vcqy/
Related
I have a list of Services with their respective descriptions, which I have linked to with anchor links.
The service details are hidden until I click on a service name. I am not being able to hide the previously clicked on services, they are overlapping.
This is a JSFiddle of what I have been able to put together so far:
https://jsfiddle.net/rdhn60mb/
$('#home-header .service-box li a').click(function() {
$($(this).attr('href')).css('display', 'block');
});
/*
$("#home-header .service-box li a").click(function(){
var $name = $(this).text();
var $activebox = ($("#" + $name).length === 0) ;
$("#home-header .service-details").not($activebox).hide();
$("#home-header .service-details").not($activebox).removeClass('active');
$activebox.toggle();
$activebox.toggleClass('active');
});
*/
(The commented out code doesn't work, but it's close to what I'm trying to achieve).
Thank you all for helping me out!
Cintia
I would agree with divy3993's answer but improve it slightly:
$('#home-header .service-box li a').click(function() {
$('.service-details').hide();
$($(this).attr('href')).toggle();
});
The toggle is just a more efficient function in this case.
You can see the example in this Fiddle: https://jsfiddle.net/rockmandew/rdhn60mb/6/
See in your case it's overlapping, as you never close/hide them. So as JavaScript/JQuery runs line by line. We will first close/hide all of them $('.service-details').hide(); onclick and then open/show only the current one.
JQuery
$('#home-header .service-box li a').click(function() {
$('.service-details').hide();
$($(this).attr('href')).css('display', 'block');
});
UPDATE :
Fiddle : Demo
Note: Here in demo i used fadeIn() so it has some smoothing effect. Also using anything else like toggle() is useless. As you are hiding all the service-details before showing so no need of toggle().
To close the div again if the same link is clicked like you wanted.. simple wrap it in an if statment checking if the current active tab has the same id as the href value. If so don't run the show
//if the clicked a element's href is not the same as the active elements id
if( $(this).attr('href') != "#"+$(".active").attr( "id" ) ) {
//remove the current active class
$('.service-details').removeClass( "active" );
//fade in the div
$($(this).attr('href')).fadeIn();
//add the class active to the div
$($(this).attr('href')).addClass( "active" );
}
Here is a jsfiddle with the edits and I also added a fadeout to make it less jumpy
https://jsfiddle.net/rdhn60mb/21/
I am working on a click event, which intially is pretty standard.
on.click: Remove the active class from all list items, then add active to the clicked list item.
ie
var li = $('.child-item');
li.click(function(){
li.removeClass('active');
li.addClass('active');
});
Works as expected. However, I also need a condition that if the active class is clicked again, it will remove the active class from the clicked item.
I tried this:
$('.child-item').toggle(function(e){
$('.child-item').removeClass('active');
$(this).addClass('active');
}, function() {
$('.child-item').removeClass('active');
$(this).removeClass('active');
});
but often the toggle is in the off state, so it requires a double click to get the toggle back on track. This seems like it would be a pretty straightforward solution, but I cannot seem to get it to work.
Added a jsFiddle here with another option. This is fine for when the same element is clicked, but it doesn't clear all active classes on each click.
Update
I got it working but TrueBlueAussie's answer is shorter and better. Here is my working fiddle:
https://jsfiddle.net/v7b8cbj5/
Your second click handler will only attach to matching "active" items when the event was registered.
Replace it all with just this:
$('.child-item').click(function(e){
$('.child-item.active').not(this).removeClass('active');
$(this).toggleClass('active');
});
You can use not() to exclude the current item from selected list of things to make inactive, then just toggle the selected one.
JSFiddle: https://jsfiddle.net/81ex7dmm/2/
.toggle() (Event) - is deprecated in jQuery 1.8 and removed in jQuery 1.9
Use add() with toggleClass() on .active <li>
$('.child-item').click(function(e){
$('li.child-item.active').add(this).toggleClass('active');
});
Updated Fiddle
var li = $('.child-item');
li.click(function(){
li.removeClass('active');
$(this).toggleClass('active');
});
Try it also :
$('.child-item').click(function(e){
$('.child-item.active').removeClass('active');
$(this).addClass('active');
});
FIDDLE DEMO
I have a series of custom Chevron elements that I'm going to use as buttons on my site. I've managed to set up the jQuery so that the clicked chevron/button is given a class="selected" which I then use to add custom styles. If I click any other chevron then the selected class is removed from the first chevron and added to the last chevron that was clicked. All of this works fine. I have another link that can be clicked to remove the class from all of the chevrons. What I'm trying to do now is to enable the .toggle(Class) function on jQuery so that I can also remove the class="selected" by clicking the same element twice.
My jQuery code:
$(function () {
$('#chevrons > ul > li > a').click( function(){
$('#chevrons .selected').removeClass('selected');
$('#show-all').removeAttr("style");
$(this).toggleClass('selected');
});
});
$(function () {
$('#show-all').click( function(){
$('#chevrons .selected').removeClass('selected');
$(this).css('color', '#FECF2A');
});
});
I've tried the toggle without the rows:
$('#chevrons .selected').removeClass('selected');
$('#show-all').removeAttr("style");
And it works fine. I assumed (perhaps incorrectly) that the jQuery would execute line-by-line and therefore the last thing to execute. But perhaps the first line above is removing the "selected" attribute from all of the chevrons and then the last line will only ever add the class.
What am I doing wrong here?
JSFiddle: http://jsfiddle.net/oqs4nycj/1/
Just exclude the clicked item from the class removal using not():
$('#chevrons .selected').not(this).removeClass('selected');
Applying this fix to your own JSFiddle (looks very cool by the way) you get this:
http://jsfiddle.net/qsnkqhp8/1/
JSFiddle:
http://jsfiddle.net/gopj0hyj/
Edit. I did not read the question carefully enough. Sorry. I have edited the code to deselect by clicking twice.
jQuery(function ($) {
// Variables are your friends - the $ preface tells us its a jQuery object
var $chevrons = $("#chevrons");
var $buttons = $chevrons.find('a');
var $show_all = $('#show_all');
// We bind a handler to the parent $chevrons element
// this is good for performance
// It will also bind the handler to elements dynamically added with ajax.
$chevrons.on('click', 'a', function(e){
var $old_selection = $buttons.filter('.selected');
var $clicked = $(this);
// Ensure that no button is selected
$buttons.removeClass('selected');
// Checks if button already was selected.
if ($clicked.get(0) !== $old_selection.get(0)) {
// select the clicked button
$clicked.addClass('selected');
}
$show_all.removeClass('active');
// prevents the browser from scrolling to top.
e.preventDefault();
});
$show_all.on('click', function(){
$buttons.removeClass('selected');
$(this).addClass('active');
});
});
I'm trying to write a function in jQuery that will add a class to a selected link (which opens a page in an iframe) then remove that class when another link is selected. I received some help from another member here before for a similar type of thing, but that involved radio buttons and tables.
I tried playing with it for awhile, but jQuery is still pretty new to me so I don't know a whole lot about it.
Basically, I have about 3-4 groups of links contained in <div id="CollapsiblePanelContent"> ... </div> and I would like to add a style to the <a> tag within this container that the user selected.
Any help would be greatly appreciated. Thank you.
<div id="CollapsiblePanelContent">
Link1
Link2
Link3
Link4
</div>
<script type='text/javascript'>
$(function() {
$('div').click(function(event) {
$(this).closest('.CollapsiblePanelContent').addClass('selected').parent().siblings().each(function() {
$(this).find('.CollapsiblePanelContent').removeClass('selected');
});
});
});
</script>
$('#CollapsiblePanelContent a').on('click', function(e){
e.preventDefault(); // prevent page reload, you may remove it if don't need
$(this).addClass('selected').siblings().removeClass('selected');
});
As CollapsiblePanelContent is id so correct selector will be #CollapsiblePanelContent not .CollapsiblePanelContent.
But if you use CollapsiblePanelContent for multiple divs then instead of id it should be class with selector .CollapsiblePanelContent. Because multiple elements can have same id.
You can try :
function handlelink(this)
{
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
//do the rest with the click
}
Based on the HTML you've provided the following should work:
$(function() {
$('.CollapsiblePanelContent a').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
});
That binds the click event handler to any <a> elements inside <div class="CollapsiblePanelContent">, which adds the selected class to the clicked link, and removes the same class from all of its siblings.
On line 6 below, I have $("ul.tabrow li").removeClass("active"); //Remove any "active" class If I change it to use $(this).removeClass("active") instead then it does not work as I thought it was.
The code works how I want it to right now, I am just wanting to know why what I mentioned above does not work, on line 7 below I use $(this) on what appears to be the same selector and that works on line 7's code but differently on line 6.
Can anyone explain this?
$("ul.tabrow li").bind({
click: function() {
return false;
},
mouseenter: function() {
$("ul.tabrow li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab-box").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
//$(activeTab).fadeIn(); //Fade in the active content
$(activeTab).show(); //Fade in the active content
return false;
}
});
You actually want to use $("ul.tabrow li") on line 6. This is because $(this) only refers to the current list item, not all of them.
$(this) is not a replacement for the selector, it refers to the current active element (the one you are mousing over). So using this on line six removes the active class from the current element and then immediately adds it back. The result is essentially nothing happening.
If you don't want to repeat the selector then you may want to use something more generic like
$(this).siblings().removeClass('active');