tab选项卡不同样式的效果

时间：2021-12-02 17:08:15

一般的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>

 

标签：

相关文章