tab选项卡不同样式的效果

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

转载于:https://www.cnblogs.com/Sroot/p/5704060.html

tab选项卡不同样式的效果相关推荐

【jQuery】前端项目实践案例1——使用jQuery制作Tab选项卡点击切换效果
1.实现效果: 案例描述:当用户单击不同的导航时,与其对应的内容回相应的呈现. 案例要求:使用jquery制作实现tab选项卡单击切换效果. 2.实现思路: (1)div+css布局,制作选项卡和对应 ...
用jQuery事件写Tab选项卡
开发工具与关键技术: VS 2019/JS 作者:唐嘉怡撰写时间:2022/6/8 大家都用过Jscript事件来写过Tab选项卡,但是代码会很繁琐,但如果有更简洁的方法来写Tab选项卡事件就更好了 ...
用fieldset标签轻松实现Tab选项卡效果
fieldset是一个不常用的HTML标签,它可以将表单内的元素分组显示,legend标签为 fieldset 元素定义标题.由于各浏览器在显示fieldset和legend结构时会自动为其添加边框和 ...
Tab选项卡切换效果JavaScript汇总
tab切换在现在的网页上,真是十分的常用呀.但是tab切换的JavaScript实现却有很多需要注意的地方,如何用最少的代码,最灵活的实现.这里收集了37个tab实现的JavaScript代码,在此备 ...
【Android UI设计与开发】第11期：顶部标题栏（二）ActionBar实现Tab选项卡和下拉导航列表
转载请注明出处:http://blog.csdn.net/yangyu20121224/article/details/9050573 在上一篇文章中,我们只是大概的了解了一下关于ActionBar ...
使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
[jQuery基础] jQuery事件相关案例 -- 电影排行榜、Tab选项卡
电影排行榜实现效果展示实现步骤第一步(实现静态效果) css部分 *{margin: 0;padding: 0;}.box{width: 300px;height: 450px;margin: ...
异步数据加载和Tab选项卡
开发工具与关键技术:VS echart和layui tab 作者:微凉之夏撰写日期:2019年06月06日在echarts入门示例中的数据是在初始化后,setOption中直接填入的,但是很多时候 ...
面向对象的tab选项卡实现
利用最基础的面向对象的思想,实现tab选项卡效果: 效果截图: HTML代码: <!DOCTYPE html> <html lang="en"> <h ...
不能随意切换的Tab选项卡页面
不能随意切换的Tab选项卡页面 ------------------------------------- 开发工具与关键技术:Visual Studio 2015 C# 作者:林敏静撰写时间:20 ...

tab选项卡不同样式的效果

tab选项卡不同样式的效果相关推荐

最新文章

热门文章