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