How to swap class / id using jquery in a css list?

Tags: jquery,css,class,html-lists,swap

Problem :

I have setup the following fiddle:

Basically I am trying to swap the class on a li when clicked (ie. remove the class motor and then add the class selected.

Also if I wished to use Id's instead of classes what code should I use?

Thanks in advance.

Solution :

updated here.

$(function() {
    $('a').click(function() {

If you wanted to use ids instead of classes (which you probably shouldn't in this situation), you would switch ('.motor') with ('#motor'), removeClass('motor') with removeAttr('id'), and then addClass('selected') with attr('id','selected'). Again, classes are better in this situation.

    CSS Howto..

    How to randomly pick colors and shapes from a for loop and display it in another div?

    how can i change the style of scroll bar

    How to change the display property in a css class using js when user clicks a button

    How to apply css and elemental styles to a MVC 3 Web Application

    How to use JavaScript to Alter CSS for Multiple Elements

    How to copy the GTK style of a widget and apply it to another?

    how to manage Css Floats

    How to put the footer at the bottom of the visible page?

    How do I make the mobile view of my website not show certain elements?

    How can I set the color of the border area around the page/post on my Wordpress Site

    how to put all labels in bold with css

    How to use jQuery to select a class name that's transformed by css-loader?

    How do browsers handle unrecognized at-rules?

    Newbie CSS/HTML: How to add ad in a div container to the side of the page?

    Show some characters above a picture on hover

    How to align div in body to stay with specific height and width

    How to get this hover effect with just CSS

    How do I hide the checkboxes from a radiobox?

    How do i position this element relative to an image?

    CSS styling - how to put these two div boxes adjacent

    How to ignore css property by override (bootstrap 3)?

    How to make this in html and css?

    How to get rid of !important tags?

    How to change the CSS after image lazy loading (jQuery)? [closed]

    How can I swap out text in a text-box by using only CSS mouse related events?

    jQuery how to rapidly change color on divs with click

    How to set HTML table cell to inherit its size?

    How to make the transitions in my css work

    How to overlap divs in html

    Bootstrap: Only Show Fixed Footer In Larger Screens?