how can you change remove a class on one li and move it to another

Question

So I am in the middle of coding a navigation bar for the side of my website and I am creating it so that you click on a li , inside of it is an a tag with no href attribute so that it acts like a button (I don't use # since it jumps to the top of the page and I don't want that)it has a drop down section come out underneath it pushing the other tabs down. What I've found online is

$('li').click(function() {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
});

or

$('li').click(function() {
    $(this).addClass('active').siblings().removeClass('active')
});

(and other variations of this)

However after I tested this out several times, either by adding multiple classes to each li or attempting to change the class active to an id and I've had no luck.

EDIT: It seems like the code works perfectly in other testing websites (codepen/jsfiddle) but it doesn't seem to work in my own browser when I open up the VisualStudio emulator (opens in the actual browser window)

Here's my code that contains this navigation bar: http://codepen.io/PorototypeX/pen/sjDBL

Answer 1

This might help :

   $("ul.navbar > li").click(function () {
        $("li[.active]").removeClass('active');
        $(this).addClass('active');
    });

Answer 2

Actually your code is fine , but it seems you are using JQuery, and it's not a native part of JS it self, it utilizes JS. So first you need to load JQuery.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>

Then try this code, it's the same but a different variation of what you have done:

    $(".navbar > li").click(function () {
      $(".navbar").children("li").removeClass("active");
       $(this).addClass('active');;                      
    });

JS Fiddle

Answer 3

jQuery not added in the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js"></script>

Demo: CodePen

---

Another problem could be that the code is not in a dom ready handler

jQuery(function () {
    $("ul.navbar > li").click(function () {
        $(this).siblings().removeClass('active');
        $(this).addClass('active');
    });
})

Demo: Fiddle

Answer 4

I figured out what was wrong with my jquery. Although the code would work perfectly on outside sources such as codepen and jsfiddle, the only way that it will work on a local server is to have this code instead:

    $(document).ready(function () {
        $("ul.navbar > li").click(function () {
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
        });
    });

The $(document).ready(function() { remaining code goes here... }) allows it to run locally.