tab选项卡不同样式的效果
2024-08-24 02:05:14
一般的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>
最新文章
- 新功能发布!Markdown写博客!
- zh-Hans vs.net 通过 管理nuget程序包下载简体中文语言包 zh-cn
- CSS 指定选择器(十一)
- Worktile 团队协同办公工具
- 从UI Automation看Windows平台自动化测试原理
- SignTool.exe(签名工具)
- ps 网页配图设计
- 大数据量场景下storm自定义分组与Hbase预分区完美结合大幅度节省内存空间
- codeforces 893B Beautiful Divisors 打表
- 芝麻HTTP:PhantomJS的安装
- Apache Jakarta Commons 工具集简介
- JS基本类型-引用类型-深浅拷贝
- 实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位
- RabbitMq的整理 exchange、route、queue关系
- 基于RYU restful api实现的VLAN网络虚拟化
- Codeforces 752C - Santa Claus and Robot - [简单思维题]
- Avito Cool Challenge 2018
- Mysql主从同步在线实施步骤【适合大数据库从库配置】
- php添加mongo模块
- Liunx 和 Win中的软链接详解
热门文章
- 本号讯 | 人工智能手表为帕金森患者带来书写希望;微软翻译发布可实时翻译幻灯片的Presentation Translator
- SequenceFile和MapFile
- LoadRunner创建脚本和场景流程
- 字符串(String)杂谈
- 2017.10.2 QBXT 模拟赛
- MovieReview—Despicable Me 3(神偷奶爸3)
- UVALive 3523 Knights of the Round Table 圆桌骑士 (无向图点双连通分量)
- 在DataGridView控件中验证数据输入
- python处理图片的一些操作
- if...else...这段代码打印结果,并简述其理由