Jquery addClass Tag doenst work

Question

I have a navigation called #nav ul li a. In this list, I want to add the class active to the element on which has been clicked.

This is my jquery

$(document).ready(function() {      
$('#nav ul li a').click(function() {
           $('#nav ul li a').removeClass('active"');

           $(this).addClass('active');
           return false;
        });
});

and this is my html

<header id="header"> 
    <h1 id="logo"><a href="#intro">DerW&auml;schestuhl</a></h1>
    <nav id="nav">
        <ul>
            <li><a href="#one" class="active" id="uebersicht-btn">&Uuml;bersicht</a></li>
            <li><a href="#two" class="" id="aussehen-btn">Aussehen</a></li>
            <li><a href="#work" class="" id="funktionen-btn">Funktionen</a></li>
            <li><a href="#produktion" class=""id="produktionen-btn">Produktion</a></li>
            <li><a href="#contact" class="" id="kaufen-btn">Kaufen</a></li>
        </ul>
    </nav>
</header>

and here is my jsfiddle to show the stylesheets: http://jsfiddle.net/Usgk3/

Do you guys have any idea why it isnt working? I cant find the mistake

removeClass('active"') <- is wrong - there is one `"` to much :) — Mr. iC, Mar 31 '14 at 12:08
It's working for me. If you were checking that in the jsFiddle that you provide, don't forget to include the jquery library you are using, without it the `$` object would not work. — frikinside, Mar 31 '14 at 12:13

score 1 · Answer 1 · answered Mar 31 '14 at 12:09

1

In your fiddle is no jQuery linked and:

$('#nav ul li a').removeClass('active"');

Remove " from ('active"').

Working JSFiddle

answered Mar 31 '14 at 12:09

Pavel Štěrba

2,822
2
28
50

score 1 · Answer 2 · answered Mar 31 '14 at 12:09

1

Try

$(document).ready(function() {      
 $('#nav ul li a').click(function(e) {
    $('.active').removeClass('active');

       $(this).addClass('active');
       return false;
    });
  });

Demo

answered Mar 31 '14 at 12:09

Anoop Joshi P

25,373
8
32
53

1

@fjw then how do you want that functionality?. this is the right one. – Ravichandran Jothi Mar 31 '14 at 12:13
Okay, it is working. Forgot to check jquery. Do you know how I can add the class to the menu element without clicking it, but by scrolling? its a parallax page – fjw Mar 31 '14 at 12:15
@fjw or you can bind the scroll event - like here http://stackoverflow.com/questions/9979827/change-active-menu-item-on-page-scroll – Mr. iC Mar 31 '14 at 12:27
@Mr. iC, thats weird. It works in jsfiddle, but neither in dreamweaver, nor in safari/firefox. why? http://jsfiddle.net/LwZV2/ – fjw Mar 31 '14 at 12:59
@fjw its not even working in jsfiddle - you have to remove the `return` false from ^ this example since this will prevent the link from jumping. Then its working fine for me. If its still not working just ask another Question... – Mr. iC Mar 31 '14 at 14:30

Ivan Doroshenko · Answer 3 · 2014-03-31T12:17:19.997

0

Remove " in string 'active"':

$('#nav ul li a').removeClass('active"');

Fiddle. With settings: fiddler settins

edited Mar 31 '14 at 12:17

answered Mar 31 '14 at 12:09

Ivan Doroshenko

944
7
13

Added fiddle link. See also Fiddle settings (jQuery added and onLoad removed) – Ivan Doroshenko Mar 31 '14 at 12:12

score 0 · Answer 4 · answered Mar 31 '14 at 12:13

0

You're missing jQuery in your fiddle demo.

You also need yo use:

$('#nav ul li a').removeClass('active');

instead of:

$('#nav ul li a').removeClass('active"');
// --                                ^ Remove this

Updated Fiddle

answered Mar 31 '14 at 12:13

Felix

37,892
8
43
55

KG Sosa · Answer 5 · 2014-03-31T12:23:47.080

0

Instead of this:

$('#nav ul li a').removeClass('active"');

Remove the " in the enclosed ('active"');

This should be like

$('#nav ul li a').removeClass('active');

That should fix the problem.

edited Mar 31 '14 at 12:23

answered Mar 31 '14 at 12:17

KG Sosa

70
9

score 0 · Answer 6 · answered Mar 31 '14 at 13:35

0

Since you don't put jquery in your fiddle i assume you use a new jquery version, so better use .on( 'click' ), not .click()
Keep it simple, replace $('#nav ul li a') with $('#nav a'). According to your markup it is exactly same stuff
Check more about .siblings() in jquery.

Your working code is here

answered Mar 31 '14 at 13:35

stefanz

1,316
13
23

thank you! It works. Do you know how I can scroll and when I've reached '#work' for example, then add the class to the menu. So not by clicking, but by scrolling. – fjw Mar 31 '14 at 13:53

Jquery addClass Tag doenst work

6 Answers6