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

HTML CSS JS代码实现页面导航功能

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wanren/p/3863315.html

文章标签：

#javascript #ViewUI

本文通过HTML代码创建了包含多个链接项的导航栏，并利用CSS样式进行了布局和美化，最后通过JavaScript实现了鼠标悬停和点击效果，增强用户体验。

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>