javascript to change css class, rather than append to it

Question

How do I change the below javascript to change my css class, rather than add/append to it?

<script type="text/javascript">
    (function($){   
        $(document).ready(function(){
        $('ul#horizontal.nav.menu').addClass('myNewClass');
        });
    })(jQuery);
</script>

EDIT

I am trying to change the following UL:

<ul class="nav menu" id="horizontal">

to

<ul class="myclass" id="horizontal">

I have tried the following just before my closing </body> tag and not working:

<script type="text/javascript">
        (function($){   
          $(document).ready(function(){
            // add items for bootstrap dropdown's
              $("#horizontal").attr("class", "myclass");
            })(jQuery);
        </script>

Right in the documentation for removeClass: http://api.jquery.com/removeClass/ — David Fleeman, Nov 01 '13 at 13:22
@DhavalMarthak that is what he has now, in a closure to ensure the `$` variable within the function will not conflict with any other library — Rory McCrossan, Nov 01 '13 at 13:22
Duplicate of [jquery change class name](http://stackoverflow.com/questions/3452778/jquery-change-class-name) — loler, Nov 01 '13 at 13:23
id's are meant to be unique.. no need of making it more narrow by giving classnames like `.nav` or `.menu`. or prefixing with `ul`.. I may be wrong but I don't recommend it. Then you should do like this `document.getElementById('horizontal').className = "myNewClass";` — Mr_Green, Nov 01 '13 at 13:24
I have tried all of these & added script just before my closing
tag & they don't work. I am trying to change
to — user991830, Nov 01 '13 at 13:36

score 2 · Accepted Answer · answered Nov 01 '13 at 13:21

2

You can try to use attr method:

$('ul#horizontal.nav.menu').attr( 'class', 'myNewClass');

answered Nov 01 '13 at 13:21

antyrat

27,479
9
75
76

score 1 · Answer 2 · answered Nov 01 '13 at 13:21

1

Quite easy..

$("#mydiv").attr("class", "myclass");

answered Nov 01 '13 at 13:21

Robert de Jonge

119
3
12

score 0 · Answer 3 · answered Nov 01 '13 at 13:26

0

$("#mydiv").prop("class", "myclass");

answered Nov 01 '13 at 13:26

Alex Coroza

1,747
3
23
39

You should use `className` instead if you use `prop` method and not `attr`. – antyrat Nov 01 '13 at 13:27

javascript to change css class, rather than append to it

3 Answers3