CSS+JQuery实现Tabs效果，点击更改背景色（不含图片）

1，Html代码

 <body>
     <div id="box">
         <ul id="tab_nav">
             <li class="nonblank">购买标书</li>
             <li class="blank"></li>
             <li class="nonblank">法授</li>
             <li class="blank"></li>
             <li class="nonblank">银行资质证明</li>
             <li class="blank"></li>
             <li class="nonblank">查阅档案</li>
             <li class="blank"></li>
             <li class="nonblank">投标分工确认</li>
             <li class="blank"></li>
             <li class="nonblank">公章使用</li>
             <li class="blank"></li>
             <li class="nonblank">购买</li>
         </ul>
     </div>
 </body>

2，CSS代码

<style type="text/css">
        #box
        {
            height: 300px;
            margin-top: 200px;
            margin-left: 200px;
        }
        .nonblank
        {
            float: left;
            list-style: none;
            border: 1px solid #999;
            height: 31px;
            line-height: 31px;
            width: 110px;
            text-align: center;
            background-color: #efeff7;
            font-size: 15px;
            font-weight: 600;
            cursor:pointer;
        }
        .blank
        {
            float: left;
            border:none;
            border-bottom:1px solid #999;
            width:5px;
            line-height:31px;
            height: 32px;
            margin:0;
            list-style: none;
        }
    </style>

3，JS代码

<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("li[class=nonblank]").each(function (index) {
                $(this).mouseover(function () {
//                    $(this).css("backgroundColor", "red");
                }).click(function () {
                    $("li[class=nonblank]").css("backgroundColor", "#efeff7");
                    $("li[class=nonblank]").css("borderBottom", "1px solid #999");
                    $(this).css("backgroundColor", "white");
                    $(this).css("borderBottom", "none");
                }).mouseout(function () {
//                    $("li[class=nonblank]").css("backgroundColor", "#efeff7");
                })
            })
        })

    </script>

4，效果图