When adding a class to
using jquery it gets added and suddenly gets removed also . is it jquery clashing or something else?

Question

$(document).ready(function() {

  var $listItems = $('ul li');
  listItems.click(function() {
  $listItems.removeClass('selected'); 
  $(this).addClass('selected');

  });
});

.selected{
   background color: "green";
}

//HTML

           <ul class="nav navbar-nav navbar-right">
                <li class="selected"><a href="index.php">Home</a></li>
                <li><a href="about-us.php">About Us</a></li>
                <li><a href="services.php">Services</a></li>
                <li><a href="portfolio.php">Portfolio</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Pages <i class="icon-angle-down"></i></a>
                    <ul class="dropdown-menu">
                        <li><a href="career.php">Career</a></li>
                        <li><a href="blog-item.php">Blog Single</a></li>
                        <li><a href="pricing.php">Pricing</a></li>
                        <li><a href="404.php">404</a></li>
                        <li><a href="registration.php">Registration</a></li>
                        <li class="divider"></li>
                        <li><a href="privacy.php">Privacy Policy</a></li>
                        <li><a href="terms.php">Terms of Use</a></li>
                    </ul>
                </li>
                <li><a href="blog.php">Blog</a></li> 
                <li><a href="contact-us.php">Contact</a></li>
            </ul>

Class gets added for a second and than gets removed to as its default .

your code looks okay, can you provide a fiddle to show the problem? I guess there's some other component causing trouble, are there any other eventhandlers on these elements? — GNi33, Aug 27 '14 at 12:18
Well .... except for the undefined variable `listItems` .... did you mean `$listItems`? — PeterKA, Aug 27 '14 at 12:20
I'd suggest it's likely to be event-propagation, clicking on the inner-`
Variable $listItems is not a problem i just removed $ sign while posting question mistakenly .. — Param sohi, Aug 27 '14 at 12:23
after $(this).addClass('selected'); if I add return false It works but it doesnt go to the page url which is in href. — Param sohi, Aug 27 '14 at 12:24
This your menu for all pages and you redirects on click links(li). So to get the li selected you have to pass #value in each link and to make a script to check the link hash value to set selected class. — rahul, Aug 27 '14 at 12:27
Aside what folks have said about `$listItem` and `background-color` you must also remove the quotes from `"green"`. — Jay Blanchard, Aug 27 '14 at 12:30

score 1 · Answer 1 · answered Aug 27 '14 at 12:25

1

I have tested the code and it works, there were only some minor errors:

listItems instead of $listItems
background color: "green"; instead of background-color: green;
added return false to stay on the current page (maybe it avoids event propagation too)

Javascript:

$(document).ready(function () {
var $listItems = $('ul li');
$listItems.click(function () {
    $listItems.removeClass('selected');
    $(this).addClass('selected');
    return false;
});
});

CSS:

.selected {
    background-color: green;
}

answered Aug 27 '14 at 12:25

collimarco

34,231
36
108
142

@user2625191 I have updated the answer with [the correct JSfiddle](http://jsfiddle.net/8tdpo8tw/) – collimarco Aug 27 '14 at 12:31
After adding return false it works BUT it will not go to url present in href – Param sohi Aug 27 '14 at 12:31
Why do you want to update the page if the user is leaving it? I thought that you were going to implement some custom behavior with AJAX for example. – collimarco Aug 27 '14 at 12:35
Could u sugeest what can be done , I am using a common header.php for different pages and yhis is code in my header.php I want to highlight the selected li , Check this http://jsfiddle.net/vdg590p5/1/ It works for highlighting but doesnt go to href – Param sohi Aug 27 '14 at 12:57
@user2625191 If I understand what you are trying to achieve, you don't even need Javascript/JQuery. Use PHP to add a `class="selected"`to the item in the menu corresponding to the current request. For example (pseudo code, you need to adapt it) insert `

collimarco

Aug 28 '14 at 13:06

score 0 · Answer 2 · answered Aug 27 '14 at 12:29

0

DEMO

Some corrections and changes and the code is working.

Style: background-color: green;

JS: $listitems, .preventDefault() and .stopPropagation.

JS

$(document).ready(function() {        
    var $listItems = $('ul li');
    $listItems.click(function(e) {
        e.stopPropagation();
        e.preventDefault();
        $listItems.removeClass('selected'); 
        $(this).addClass('selected'); 
    });
});

CSS:

.selected {
   background-color: green;
}

answered Aug 27 '14 at 12:29

PeterKA

24,158
5
26
48

This works but You can see in demo that after clicking on
It doesnt go to to any page even when there is a href value

Param sohi

Aug 27 '14 at 12:43

Now I understand fully what you're trying to do. That kind of styling you use `server-side` scripting. In this kind of setup, as soon as you navigate to another page you're are loading a new page and you lose the styling. – PeterKA Aug 27 '14 at 12:46

yes thats the problem , What should i do instead of this ? @user3558931 – Param sohi Aug 27 '14 at 12:50

On the server-side you can check which page is being loaded, and you can add the class to the corresponding `li`. Each page will then be loaded with the appropriate `li` already styled. The third answer in [**this post**](http://stackoverflow.com/questions/2397370) uses that technique. – PeterKA Aug 27 '14 at 13:10

When adding a class to using jquery it gets added and suddenly gets removed also . is it jquery clashing or something else?

2 Answers2

When adding a class to
using jquery it gets added and suddenly gets removed also . is it jquery clashing or something else?