adding active class to parent list when link is clicked/active , am trying to inject that using JavaScript as follow:
$(document).ready(
function()
{
//injecting active status to the navigation bar lists
var element = document.getElementById("navbar-ul");
var links = element.getElementsByTagName("a");
for(var i = 0; i < links.length ; i++) {
links[i].onclick(function () {
links[i].parent().addClass('active');
});
}
}
);
but am getting the following error:
TypeError: links[i].onclick is not a function
how I supposed to achieve that?
A more verbose JQuery way to approach this
$('#navbar-ul a').each(function() {
$(this).on('click', function() {
$(this).parent().addClass('active');
});
});
This is very simply with jQuery:
$("#navbar-ul a").click(function(){
$(this).parent().addClass("active");
});
EXAMPLE 1
I'm guessing you're trying to add an active state to the link thats being clicked on and remove the others? If so you can use .siblings() to find the other links and remove their class:
$("#navbar-ul a").click(function(){
$(this).closest("li").addClass("active").siblings("li").removeClass("active");
});
EXAMPLE 2
You would be better of with adding a class to the tags who needs an eventListener. (with jquery)
$(document).ready(function() {
$("#navbar-ul a").on("click", function() {
var active = document.querySelector('#navbar-ul .active');
if(active){
$("#navbar-ul a").removeClass('active');
}
$(this).addClass("active");
});
);
Related
I'm having a bit of trouble with a dropdown menu that triggers fadeOut as soon as the mouse leaves the grandparent div, I've searched this problem to death and have yet to find an elegant solution. Here is my code : link
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function(){
$('ul li ul').fadeOut('400');
});
}
$(document).ready(main);
DEMO: MY FIDDLE
You need to specify what element(s) you are trying to attach the event to. By adding '>' youre forcing to only attach the event to that element's children. Try this:
var main = function() {
$('nav').mouseenter(function() {
$(this).find('ul').fadeIn('400');
});
$('nav>ul>li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};
FIDDLE
$(this).find('ul').fadeOut('400');
is correct as $('ul>li>ul').fadeOut('400'); Could not target specific (current) li.
Use following hierarchical flow of TAGS
var main = function() {
$('nav').mouseenter(function() {
$('ul li ul').fadeIn('400');
});
$('nav ul li').mouseleave(function() {
$(this).find('ul').fadeOut('400');
});
};
I have created a simple tabs widget, here is a working jsfiddle: http://jsfiddle.net/G3eRn/1/
When I add another Tabs widget "as you will see in the example" in the same page, everything get missed up! I really don't know how to describe it... after looking into it and trying to debug it, I have concluded that it is the JavaScript that needs to be looked at, so I have researched, but didn't really find an answer that would fix it. However, I found that using .each might fix it? so I did try it but didn't work - maybe I used it wrong.
What I am doing wrong?
Here is the JS:
//Tabs Navigation
$('.tabs .tabs-menu a:eq(0)').addClass('active');
$('.tabs .tabs-sections .tabs-section:not(:first-child)').hide();
$('.tabs .tabs-menu a').on('click', function() {
$('.tabs-menu a').removeClass('active');
$(this).addClass('active');
$('.tabs .tabs-sections > .tabs-section:eq(' + $(this).index() + ')').show().siblings().hide();
});
You have to make sure only the current tab group is being affected (using .each):
http://jsfiddle.net/G3eRn/2/
//Tabs Navigation
$('.tabs').each(function(){
var $tabs = $(this);
$tabs.find('.tabs-menu a:eq(0)').addClass('active');
$tabs.find('.tabs-sections .tabs-section:not(:first-child)').hide();
$tabs.find('.tabs-menu a').on('click', function () {
$tabs.find('.tabs-menu a').removeClass('active');
$(this).addClass('active');
$tabs.find('.tabs-sections > .tabs-section:eq(' + $(this).index() + ')').show().siblings().hide();
});
});
And here's a version that's a little more performant:
http://jsfiddle.net/G3eRn/7/
//Tabs Navigation
$('.tabs').each(function(){
var $tabs = $(this);
$tabs.find('.tabs-sections .tabs-section:not(:first-child)').hide().end()
.find('.tabs-menu a').on('click', function () {
$tabs.find('.tabs-menu a').removeClass('active').end()
.find('.tabs-sections > .tabs-section:eq(' + $(this).index() + ')').show().siblings().hide();
$(this).addClass('active');
}).eq(0).addClass('active');
});
The second example uses end() which "undoes" the last selector.
So for example
$('.el').find('div').end().addClass('test')
would add the class "test" to the .el element instead of all div's inside it.
In your "click" handler, you have to make sure that you're applying changes only to the relevant group of tabs. As your code is currently written, the handler code will affect all the matching tab groups on the page.
You can use jQuery DOM navigation methods to do it:
$('.tabs .tabs-menu a:eq(0)').addClass('active');
$('.tabs .tabs-sections .tabs-section:not(:first-child)').hide();
$('.tabs .tabs-menu a').on('click', function () {
// find the current menu group and deactivate all tab labels
$(this).closest('.tabs-menu').find('a').removeClass('active');
// activate this tab
$(this).addClass('active');
// find the tab section corresponding to this tab menu
$(this).closest('.tabs').find('.tabs-sections > .tabs-section:eq(' + $(this).index() + ')').show().siblings().hide();
});
The .closest() method walks up the DOM looking for a match. From that point, .find() looks down the DOM in that isolated subtree.
Here's your fiddle, updated.
Personally I'd use a delegated handler setup so that tab groups could be added dynamically without needing to re-run the code:
$('body').on('click', '.tabs-menu a', function() {
// as above
});
You need to apply the functions to every .tabs element.
$('.tabs').each(function() {
var $tabs = $(this);
$('.tabs-menu a:eq(0)', $tabs).addClass('active');
$('.tabs-sections .tabs-section:not(:first-child)', $tabs).hide();
$('.tabs-menu a', $tabs).on('click', function() {
$('.tabs-menu a', $tabs).removeClass('active');
$(this).addClass('active');
$('.tabs-sections > .tabs-section:eq(' + $(this).index() + ')', $tabs).show().siblings().hide();
});
});
The syntax jQuery( 'selector', node ) selects child elements only inside the given HTML element node. In this case an element with the class .tabs. This is similar to do jQuery( node ).find( 'selector' ).
Using $ is just a way for me to always know, which variable is a jQuery object. For example: var $this = jQuery( this );.
If you want more performance in your script store selected node in a variable (e.g. .tabs-menu a in your code). You may even querySelector to get the elements via plain JS instead of jQuery. The jQuery each on the other hand is very comfortable.
An example mixup of different methods:
$('.tabs').each(function() {
var tabs = this,
links = this.querySelectorAll( '.tabs-menu a' );
/* passing a DOMNodeList to jQuery and filter it */
$(links).filter(':eq(0)', tabs).addClass('active');
$('.tabs-sections .tabs-section:not(:first-child)', tabs).hide();
/* setup event handler */
/* without jQuery, one need to itererate over the list of elements */
for( var i = links.length; i--; ) {
var currentLink = links[i];
currentLink.addEventListener('click', function() {
var currentTab = this;
/* jQuery does the loop internally */
$(links).removeClass('active');
currentTab.classList.add('active');
$('.tabs-sections > .tabs-section:eq(' + $(currentTab).index() + ')', tabs).show().siblings().hide();
}, false);
}
});
For documentation and browser support see here:
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Document.querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Element.classList
There is a JS ployfill for nearly any modern feature:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
I have HTML
<div id="top" class="shadow">
<ul class="gprc">
<li>Home</li>
<li>Text1</li>
<li>Text2</li>
<li>Text3</li>
<li>Text4</li>
</ul>
</div>
and JQUERY
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
}
});
});
The problem is that when i click on the Home link all tabs are getting active class and don't understand why. I need it for the first link to not get any active class.
I'm also looking for this solution and I have tested your code. On the first approach all links are highlighted and when I click other links it is working properly. The problem was on the home page because all links are highlighted because there is "no event been received" when the page is loaded, the code will work if you send a command or by clicking each links, theoretically. To stop this behavior, I found this code to one of the answers above, add this code and change the ".sibling()" to ".previousSibling()"
$(this).parent().sibling().find('a').removeClass('active');
".sibling()" will highlighted at the end of your links change it to ".previousSibling()" so it will go to first (Li)
$(this).parent().previoussibling().find('a').removeClass('active');
Your code will be like this:
$(function () {
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/, '') + "$");
$('#top a').each(function () {
if (urlRegExp.test(this.href.replace(/\/$/, ''))) {
$(this).addClass('active');
$(this).parent().previoussibling().find('a').removeClass('active');
}
});
});
Check this , this will only activates clicked tab , remove active for all and then add for the one clicked
$("#top a").click(function() {
$('a').removeClass('active');
$(this).addClass("active");
});
Check this
You may try this out. It will help you:
<script type="text/javascript">
$(function () {
$('#sidebar li a').each(function () {
var path = window.location.pathname;
if (path.indexOf('?') > 0) {
var current = path.indexOf('?');
}
else {
var current = path;
}
var url = $(this).attr('href');
var currenturl = url.substring(url.lastIndexOf('.') + 1);
if (currenturl.toLowerCase() == current.toLowerCase()) {
$(this).addClass('active');
var par = $(this).parent();
par.addClass('open');
}
});
});
</script>
You're running a foreach loop on all <a> tags within your #top div. So of course it'll add the class active to all of them.
I think what you're trying to do is this: http://jsfiddle.net/rLddf/4/
I used the click event instead.
edit switched link to Kristof Feys example - more efficient.
try this...
$(function() {
$('#yourMenu a').each(function(){
$current = location.href;
$target= $(this).attr('href');
if ( $target== $current)
{
$(this).addClass('active');
}
});
});
I came across the same issue and I found it easier to just add an additional if statement so that the function would fire on all pages except the home page which met my needs.
$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('#top a').each(function(){
if ( window.location.pathname != '/' ){
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('active');
}
}
});
});
You could also add in an else statement to show an active link on the homepage by targeting the link directly if required.
I think you need something like this:
$(function () {
$("#top a").click(function(e){
e.preventDefault();
$(this).addClass('active');
$(this).parent().siblings().find('a').removeClass('active');
});
});
Fiddle Demo
This function is set up so it simply finds the -a's- within the class of menu-option-set, and says, upon click, add the class "selected" and remove the class "selected" from all others within that list.
What I want to do is simply have it so if you click the item that already has the class of "selected" then it removes the class of "selected". I know it shouldn't be "return false;" I just have that as a placeholder because I can't figure out the proper coding.
Thanks guys! :)
var $optionSets = $('.menu-option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
// Remove Class if already selected --> this is the part that I need help with
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.menu-option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
});
$('.menu-option-set a').click(function()
{
// if clicked item is selected then deselect it
if ($(this).hasClass('selected'))
{
$(this).removeClass('selected');
}
// otherwise deselect all and select just this one
else
{
$('.menu-option-set a').removeClass('selected');
$(this).addClass('selected');
}
});
You should just be able to use $().removeClass('selected') i.e.
if ( $this.hasClass('selected') ) {
$this.removeClass('selected');
}
However, you are also adding the class again later so this should not really be necessary.
You could inline this by selecting all the .selected elements, removing this and removing the class.
$this
.parents('.menu-option-set')
.find('.selected')
.not(this)
.removeClass('selected');
$(this).addClass('selected');
Alternatively, use the toggleClass() method as follows:
var $optionSets = $('.menu-option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
var $optionSet = $this.parents('.menu-option-set');
$optionSet.find('.selected').not(this).removeClass('selected');
$this.toggleClass('selected');
});
EDIT: Added the .not(this) to exclude the clicked <li> from having the class removed before it should.
If you want to be concise:
$('.menu-option-set a').click(function() {
$(this).toggleClass('selected').siblings().removeClass('selected');
});
I have a jquery function that when a li is clicked, the li expands. That part is working fine. Now, I want, when the li is clicked it toggles a background color. But it works, however when i have to click on the li item again to untoggle the background color. Can someone assist me in the right direction on how to achieve this.
$(function() {
$('.a').click(function() {
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide('fast');
$('.selected').css('background', 'yellow');
content.slideToggle('fast');
});
$("li").click(function() {
$(this).toggleClass("highlight");
});
});
On every click set your <li>-s to default color and highlight the current:
$("li").click(function() {
$("li").removeClass("highlight");
$(this).addClass("highlight");
});
...
UPDATE
http://jsfiddle.net/NXVhE/4/
$(function() {
$('.a').click(function() {
$(this).removeClass("highlight");
var name = $(this).attr("name");
var content = $('.content[name=' + name + ']');
$('.content').not(content).hide();
content.toggle();
});
$("a").click(function () {
$("a").removeClass("highlight");
if ( $(".content").is(":visible") ) {
$(this).addClass("highlight");
}
});
});
Assuming the <li>s are all siblings, it would be slightly more efficient to do something like this, and would allow for more than one list on the same page to function independently of one another (again, assuming that is the desired functionality)
$('li').click(function() {
$('this').addClass('highlight').siblings().removeClass('highlight').
});