一般的tab选项卡就只能两种样式，一种是选中或者是划过这个选项卡样式，一种是没选中或者没划过选项卡样式。
现在有这种需求，就是选中或划过tab选卡要不同样式。比如tab1选中或者划过是红色，tab2选中或者划过是绿色，tab3选中或者划过是蓝色。
实现方法就是动态覆盖原来的css样式。
代码如下：
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>tab选项卡</title><script src="///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>
如果觉得《tab选项卡不同样式的效果》对你有帮助，请点赞、收藏，并留下你的观点哦！
