tab选项卡不同样式的效果

最新推荐文章于 2023-02-15 08:51:35 发布

weixin_30823833

最新推荐文章于 2023-02-15 08:51:35 发布

阅读量265

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Sroot/p/5704060.html

版权

一般的tab选项卡就只能两种样式，一种是选中或者是划过这个选项卡样式，一种是没选中或者没划过选项卡样式。

现在有这种需求，就是选中或划过tab选卡要不同样式。比如tab1选中或者划过是红色，tab2选中或者划过是绿色，tab3选中或者划过是蓝色。

实现方法就是动态覆盖原来的css样式。

代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>tab选项卡</title>
        <script src="//cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script>
        <script>
            $(document).ready(function() {
                var list = $('#tab li');

                list.mouseover(function() {
                    list.removeClass('curr');
                    $(this).addClass('curr');
                })
            })
        </script>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }
            
            #tab li {
                float: left;
                color: #000;
                height: 30px;
                cursor: pointer;
                line-height: 30px;
                padding: 0 20px;
            }
            
            .tab1.curr {
                background: #ff0101;
            }
            
            .tab2.curr {
                background: #00ffa3;
            }
            
            .tab3.curr {
                background: #ffb9f9;
            }
        </style>
    </head>

    <body>

        <ul id="tab">
            <li class="tab1 curr">tab1</li>
            <li class="tab2">tab2</li>
            <li class="tab3">tab3</li>
        </ul>

    </body>

</html>