javascript css红色经典选项卡效果实现代码


Posted in Javascript onMay 17, 2016

本文实例为大家分享了js选项卡效果的具体实现代码,供大家参考,具体内容如下

效果图:

javascript css红色经典选项卡效果实现代码

实现代码:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>无标题文档</title> 

<style type="text/css"> 
body{ font-size:12px;} 
.sec,.sec1{ cursor:pointer;} 
.sec{ color:#FFFFFF; font-weight:bold; text-align:center; background-color:#990000;} 
.sec1{ color:#990000; text-align:center; background-color:#FFFFFF;} 
div{ line-height:22px;} 
</style> 

<script language="javascript"> 
function $(id){ 
return document.getElementById(id); 
} 
function xxk(num,id,ii,iii) 
{ 
//alert(ii); 
var dq; 
for(var i=1;i<=num;i++) 
{ 
  if(i==id){ 
 dq=$(ii+i).className='sec'; //当前选项 
 $(iii+i).style.display="block"; 
  } 
  else 
  { 
  dq=$(ii+i).className='sec1'; 
  $(iii+i).style.display="none"; 
  } 
} 
} 
</script> 


</head> 

<body> 

<table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000"> 
 <tr> 
  <td class="sec" id="t1" onmouseover="xxk(5,1,'t','tt')">选项卡1</td> 
  <td bgcolor="#FFFFFF" id="t2" class="sec1" onmouseover="xxk(5,2,'t','tt')">选项卡2</td> 
  <td bgcolor="#FFFFFF" id="t3" class="sec1" onmouseover="xxk(5,3,'t','tt')">选项卡3</td> 
  <td bgcolor="#FFFFFF" id="t4" class="sec1" onmouseover="xxk(5,4,'t','tt')">选项卡4</td> 
  <td bgcolor="#FFFFFF" id="t5" class="sec1" onmouseover="xxk(5,5,'t','tt')">选项卡5</td> 
 </tr> 
 <tr> 
  <td colspan="5" bgcolor="#FFFFFF"> 
<div id="tt1">选项卡1月在上班</div> 
<div id="tt2" style="display:none;">选项卡2月在上班</div> 
<div id="tt3" style="display:none;">选项卡3月在上班</div> 
<div id="tt4" style="display:none;">选项卡4月在上班</div> 
<div id="tt5" style="display:none;">选项卡5月在上班</div> 
</td> 
 </tr> 
</table> 
<br /> 
<table width="620" border="0" cellpadding="4" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#990000"> 
 <tr> 
  <td class="sec" id="ts1" onclick="xxk(4,1,'ts','tts')">选项卡1</td> 
  <td bgcolor="#FFFFFF" id="ts2" class="sec1" onclick="xxk(4,2,'ts','tts')">选项卡2</td> 
  <td bgcolor="#FFFFFF" id="ts3" class="sec1" onclick="xxk(4,3,'ts','tts')">选项卡3</td> 
  <td bgcolor="#FFFFFF" id="ts4" class="sec1" onclick="xxk(4,4,'ts','tts')">选项卡4</td> 
 </tr> 
 <tr> 
  <td colspan="4" bgcolor="#FFFFFF"> 
<div id="tts1">选项卡1月在上班</div> 
<div id="tts2" style="display:none;">选项卡2月在上班</div> 
<div id="tts3" style="display:none;">选项卡3月在上班</div> 
<div id="tts4" style="display:none;">选项卡4月在上班</div> 
</td> 
 </tr> 
</table> 


</body> 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
javascript复制对象使用说明
Jun 28 Javascript
基于jquery的textarea发布框限制文字字数输入(添加中文识别)
Feb 16 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
在JavaScript中使用开平方根的sqrt()方法
Jun 15 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
JavaScript 禁止用户保存图片的实现代码
Apr 28 Javascript
JS获取IMG图片高宽的简单实例
May 17 #Javascript
简单的分页代码js实现
May 17 #Javascript
Js获取图片原始宽高的实现代码
May 17 #Javascript
创建一个类Person的简单实例
May 17 #Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 #Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 #Javascript
基于Bootstrap3表格插件和分页插件实例详解
May 17 #Javascript
You might like
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
JavaScript 继承详解(四)
2009/07/13 Javascript
JavaScript 核心参考教程 内置对象
2009/10/13 Javascript
jquery手风琴特效插件
2015/02/04 Javascript
jQuery和JavaScript节点插入元素的方法对比
2016/11/18 Javascript
jQuery弹出窗口打开链接的实现代码
2016/12/24 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
2020/08/13 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[01:04:06]DOTA2上海特级锦标赛A组资格赛#2 Secret VS EHOME第一局
2016/02/26 DOTA
python中for语句简单遍历数据的方法
2015/05/07 Python
Python 使用os.remove删除文件夹时报错的解决方法
2017/01/13 Python
numpy中索引和切片详解
2017/12/15 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
印度最大的网上花店:Ferns N Petals(鲜花、礼品和蛋糕)
2017/10/16 全球购物
京东国际站:JOYBUY
2017/11/23 全球购物
人事专员岗位职责说明书
2014/07/30 职场文书
创先争优个人承诺书
2014/08/30 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
公安纪律作风整顿心得体会
2016/01/23 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
导游词之井冈山
2019/11/20 职场文书
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技