您的位置：首页 > Web前端 > CSS

tab选项卡不同样式的效果

2016-07-25 16:38 639 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航