Question

I have a horizontal navigation menu with 5 buttons and i need to change the state of the clicked button.
This is the code i am using to achieve this :

HTML :

<div id="tab_menu">

<ul>
<li class="li_class"><a href="#">Link 1</a></li>
<li class="li_class"><a href="#">Link 2</a></li>
<li class="li_class"><a href="#">Link 3</a></li>
<li class="li_class"><a href="#">Link 4</a></li>
<li class="li_class"><a href="#">Link 5</a></li>
</ul>

</div>

CSS :

#tab_menu {
        position:relative;
        width:800px;
        margin:0px auto;
        padding:20px;
        background-color:#fff;
    }

    ul {
        position:absolute;
        top:0px;
        margin:0px;
        background-color:#fff;
        list-style:none;
        overflow:auto;
    }

    ul li {
        float:left;
        width:150px;
        background-color:#1227B0;
        border:1px dashed #fff;
        border-radius:0px 0px 10px 10px;
        height:30px;
    }

    ul li a {
        color:#fff;
        width:150px;
        text-align:center;
        text-decoration:none;
        display:block;
        font-size:14px;
        line-height:30px;
    }

JQUERY :

$(document).ready(function() {
    $('.li_class').click(function() {
        $(this).css('background-color', '#7787F1');
    });
});​

The problem is , The style of the button is changed to the color specified when clicked but i need to restore the original style to the button when i click another one , How can i achieve this?

Answer 1

Set all of the buttons back to the default color (assuming #1227B0, from your code), and then change $(this) afterwards.

$(document).ready(function() {
    $('.li_class').click(function() {
        $('.li_class').css('background-color', '#1227B0');
        $(this).css('background-color', '#7787F1');
    });
});