html

   <div class="nav">
        <ul>
            <li><a href="#">点击一</a></li>
            <li><a href="#">点击二</a></li>
            <li><a href="#">点击三</a></li>
            <li><a href="#">点击四</a></li>
        </ul>
    </div>

javascript

<script type="text/javascript">
        $(".nav li a").click(function(){
            $(this).addClass("on").parent().siblings().children().removeClass("on");
        })
</script>

css

<style type="text/css">
    *{
        padding:0px;
        margin:0px;
    }
    li{
        list-style: none;
    }
 
    .nav{
        width: 100%;
        height: 20px;
        line-height: 60px;
        height: 60px;
    }
 
    .nav li{
        width: 24%;
        float: left;
        background: #FFFF33;
        border: 1px solid #fff;
    }
    .nav li a{
        color: #666;
        text-align: center;
        display: block;
    }
    .nav li a:hover{
        color: #fff;
        background: #66CC00;
    }
 
    .on{
        color: #fff !important;
        background: #66CC00;
    }
</style>