Question

I made a simple script that tells you what’s selected using jQuery remove class and add class but it seems to be way too much coding.

Here is the fiddle: http://jsfiddle.net/Wz7Dv/

and here is the code:

$(".panel_nav li.kset").click(function(){
        $('.panel_nav li.gset,.panel_nav li.kset,.panel_nav li.rset,.panel_nav li.dset').removeClass('selected');
        $(this).addClass('selected');
    });
    $(".panel_nav li.gset").click(function(){
        $('.panel_nav li.gset,.panel_nav li.kset,.panel_nav li.rset,.panel_nav li.dset').removeClass('selected');
        $(this).addClass('selected');
    });

    $(".panel_nav li.rset").click(function(){
        $('.panel_nav li.gset,.panel_nav li.kset,.panel_nav li.rset,.panel_nav li.dset').removeClass('selected');
        $(this).addClass('selected');
    });
    $(".panel_nav li.dset").click(function(){
        $('.panel_nav li.gset,.panel_nav li.kset,.panel_nav li.rset,.panel_nav li.dset').removeClass('selected');
        $(this).addClass('selected');
    });

Is there a way to strip it down?

Thank you

Answer 1

You should not have links between ul and its li elements:

<ul id="panel_nav" class="panel_nav">
    <li class="gset selected"><a href="#generalsettings">General Settings</a></li>
    <li class="kset"><a href="#keyboardshortcuts">Keyboard Shortcuts</a></li>
    <li class='rset'><a href="#regionalsettings">Regional Settings</a></li>
    <li class="dset"><a href="#resetdefaults">Reset to Defaults</a></li>
</ul>

Moving the anchor inside the li requires a change in your CSS:

.selected a {color:red}

The javascript is very repetitive and can be cut down to this:

$("#panel_nav li").click(function() {
    $(this).addClass('selected').siblings(".selected").removeClass('selected');
});

JSFiddle: http://jsfiddle.net/Wz7Dv/1/