Develop Reference

Highlighting active link with jquery

I'm trying to highlight the active link, it does highlight it but the underline is suddenly removed. Can't figure out what I'm doing wrong:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('nav ul li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$('a.active').removeClass('active');
$(this).parent().addClass('active');
}
});
});
HTML:
<nav>
<ul>
<li><a class="active" href="#intro" title="Intro">Intro</a></li>
<li>What We Do</li>
<li>How We Do It</li>
<li>Our Modus Operandi</li>
</ul>
</nav>
Any help? Thanks.

I can say what you are doing wrong!! You are removing active class from a tag and then you are adding it to it's parent which is li. So basically what you need to do is add it back to current a and you can do so just by removing .parent() before adding active class and your updated function will be as below:
$(document).ready(function () {
var str = location.href.toLowerCase();
$('nav ul li a').each(function () {
if (str.indexOf(this.href.toLowerCase()) > -1) {
$('a.active').removeClass('active');
$(this).addClass('active');
}
});
});

This one is simpler and it does the job:
$('nav li').click(function(e) {
e.preventDefault();
$('nav li a.active').removeClass('active');
$('a', this).addClass('active');
});
Fiddle here.

Trying to make a link "active" when another link is clicked

I need help help editing the following JavaScript.
<script>
$('.nav li a').on('click', function() {
$(this).parent().parent().find('.active').removeClass('active');
$(this).parent().addClass('active');
});
</script>
===================================================================
In addition to the existing functionality, I need "link2" to become "active" when "link1" is clicked. See HTML below.
<h1 class="brand">Brand</h1>
<ul class="nav">
<li class="active">One</li>
<li>Two</li>
<li>Three</li>
</ul>

You can use the below code. A jsFiddle sample is available here.
$('.nav li a').on('click', function (event) {
event.preventDefault(); //Add this only if you want to stop the default link action.
$(this).parent().siblings('li').removeClass('active');
$(this).parent().addClass('active');
});
//The below is to make #link2 active whenever #link1 is clicked.
$('.brand a').on('click', function () {
$('.nav li:first').addClass('active');
$('.nav li:first').siblings('li').removeClass('active');
});

Assuming you should only have one active element on the page, you could do something like this.
$('.nav li a').on('click', function() {
$('.active').removeClass('active');
$(this).parent().addClass('active');
});
If not then you can use closest like so
$('.nav li a').on('click', function() {
$(this).closest('.active').removeClass('active');
$(this).parent().addClass('active');
});
From your comment i think this could work
$('.nav li a').on('click', function() {
$('active').removeClass('active');
var link = $(this).attr('href'), // link1
number = parseInt(link.substr(-1)), // 1
newHref = link.slice(0, link.length - 1) + number++;
$(newHref).addClass('active');
});
so if you click on link1 then link2 will get the active class and click on link2 then link3 will get it and so on....

Identify active class from span in accordion

Ok folks,
I am having some issues with producing an accordion menu with Jquery for a CMS I must use. This old CMS assigns the "active" item class in a span tag, and not the a or li ones. I need to be able to set the active tab via the code activating the span tag, and not the li anchor tag like I have already. Heres the example:
<script type="text/javascript">
$(document).ready(function () {
$('#amenu > li > a').click(function(){
if ($(this).attr('class') != 'active'){
$('#amenu li ul').slideUp();
$(this).next().slideToggle();
$('#amenu li a').removeClass('active');
$(this).addClass('active');
}
});
});
</script>
Example output from the CMS is below:
<ul id="amenu">
<li>Home</li><li><span class="currentbranch0">
Content</span>
<ul class="multilevel-linkul-0" title="">
<li>Content 2</li>
<li><span class="currentbranch1">Content 3</span></li>
</ul>
</li>
</ul>
How would I approach tackling this problem would anyone know? I have different combinations but keep breaking the anchor link.
Also if I set the anchor active class manually on the page the accordion won't expand the children, as I will be using a CMS though this might not be that big a deal.
Any help would be appreciated
Regards
Nick

You can just add .closest('span') in places in your code that are referring to the class active:
$(document).ready(function () {
$('#amenu > li > a').click(function(){
if ($(this).closest('span').attr('class') != 'active'){
$('#amenu li ul').slideUp();
$(this).next().slideToggle();
$('#amenu li a').closest('span').removeClass('active');
$(this).closest('span').addClass('active');
}
});
});

remove class of group of links once another link is clicked

These group of links are my nav elements. var make_button_active removes and inserts class active once clicked into the link. With CSS, class active assigns an orange color to the text of the link. I have another link which is outside of this group. Its a logo as link which goes to #home. I would like that once this is clicked the class active is removed from the links inside the ul.menu. This way the nav elements wont remain colored in orange when #home is clicked. I've tried it alone but I'm a beginner with javascript.
Could you help me with this quest?
HTML:
<nav>
<div id="logo">
<img src="_img/logo.png" alt="DR logo" />
</div>
<div id="categories">
<ul class="menu">
<li>ABOUT ME</li>
<li>SHOWCASE</li>
<li>HOW DO I WORK</li>
<li>LETS MEET</li>
</ul>
</div>
<hr>
</nav>
CSS:
.menu li.active a {
color: #ff530d;
}​
JQUERY:
<script type="text/javascript">
var make_button_active = function()
{
//Get item siblings
var siblings =($(this).siblings());
//Remove active class on all buttons
siblings.each(function (index)
{
$(this).removeClass('active');
}
);
//Add the clicked button class
$(this).addClass('active');
}
var classOut = function()
{
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
</script>

I rewrote your entire JavaScript, does this help?
I changed your JavaScript to:
$(document).ready(function()
{
$('.menu a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
$(this).addClass('active');
});
$('#logo > a').click(function(e)
{
e.preventDefault();
$('.menu a').removeClass('active');
});
});
​

At first: jQuery !== JavaScript
Also, #home wont select your home link, because it does not select the href, but the id.
Use instead $("#logo a").click(classOut);
Also, your function make_button_active should look something like this:
var make_button_active = function() {
$('.active').removeClass('active');
$(this).addClass('active');
}
You don't need to iterate over all the siblings, your active can only be on one element at once, you can just select this and remove the class before setting it on the newly selected element.
Finally, you do not necessarily have to do a function expression var make_button_active = function(){...}, a function declaration is completely okay in your case: function make_button_active(){...}. However, often it is good to use function, and not like Sam did using anonymous functions, because you can then reuse those functions easily.
Your entire script should look like this:
<script type="text/javascript">
function make_button_active(){
$('.active').removeClass('active');
$(this).addClass('active');
}
function classOut(){
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#logo a").click(classOut);
});
</script>

There is no element with ID of home in your markup:
<img src="_img/logo.png" alt="DR logo" />
You are using ID selector and your selector doesn't select the element with #home href attribute. You can add ID to your element or use attribute selector:
$("a[href='#home']").click(classOut);
Also you don't need to use each method:
var make_button_active = function() {
$(this).addClass('active').siblings().removeClass('active')
}
var classOut = function() {
$(".menu li").removeClass('active');
}
$(document).ready(function() {
$(".menu li").click(make_button_active);
$("#home").click(classOut);
});
http://jsfiddle.net/hJdXU/

Jquery hover + position absolute = Problems in IE

I'm making a drop down menu and it works great in all modern browser but im not sure, it fails in IE, when i try to select the sub-elements of the submenu, it disappears.
This is the page: http://XXX/
and this is the JS code
$("nav li").hover(function(){
$(".subnavi-wrapper", $(this)).show();
}, function(){
$(".subnavi-wrapper", $(this)).hide();
});
EDIT: Apparently it's the margins on top of the dropdown which seem to activate the "mouseout" in IE! Aparently jQuery detects badly the area of the items with position absolute! :(

It's all because block "subnavi-wrapper" in Li element. You must remove DIV and try do it only by using Ul element. I made something like it here: http://www.muzykakoncerty.pl
here, something like this:
$('#menu > ul > li').each(function() {
if($('ul', this).length > 0) {
$(this).hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}
);
}
});
and my menu HTML code is:
<div id="menu">
<ul>
<li>
wstęp
</li>
<li>
<ul>
<li>Big Band</li>
<li>Arti Sound Concert</li>
<li>Leszczyńska Kapela Barokowa</li>
</ul>
zespoły
</li>
<li>
<ul>
<li>Dancing Sisters</li>
</ul>
taniec
</li>
<li>
o mnie
</li>
<li>
kontakt
</li>
</ul>
</div>
EDIT:
so try it:
$('nav > ul > li').each(function() {
if($('ul', this).length > 0) {
$(this).hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}
);
}
});

What you have uses the multiple selector selector will show/hide both the nav li and the .subnavi-wrapper. I think you only need to toggle the .subnavi-wrapper
$("nav li").hover(function(){
$(".subnavi-wrapper").show();
}, function(){
$(".subnavi-wrapper").hide();
});
If you only want to show the .subnavi-wrapper under the current li:
$("nav li").hover(function(){
$(this).find(".subnavi-wrapper").show();
}, function(){
$(this).find(".subnavi-wrapper").hide();
});

// show
$("nav li").live('mouseover',function(){
$(".subnavi-wrapper").show();
});
// hide
$("nav li").live('mouseout',function(){
$(".subnavi-wrapper").hide();
});