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

1，Html代码

 1 <body>
 2     <div id="box">
 3         <ul id="tab_nav">
 4             <li class="nonblank">购买标书</li>
 5             <li class="blank"></li>
 6             <li class="nonblank">法授</li>
 7             <li class="blank"></li>
 8             <li class="nonblank">银行资质证明</li>
 9             <li class="blank"></li>
10             <li class="nonblank">查阅档案</li>
11             <li class="blank"></li>
12             <li class="nonblank">投标分工确认</li>
13             <li class="blank"></li>
14             <li class="nonblank">公章使用</li>
15             <li class="blank"></li>
16             <li class="nonblank">购买</li>
17         </ul>
18     </div>
19 </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，效果图

 

posted @ 2014-07-23 16:21  美酒与歌  阅读(1618)  评论(0)    收藏  举报