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 相关文章推荐
htm调用JS代码
Mar 15 Javascript
javascript深入理解js闭包
Jul 03 Javascript
Javascript和Java获取各种form表单信息的简单实例
Feb 14 Javascript
ES5 ES6中Array对象去除重复项的方法总结
Apr 27 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
js 获取json数组里面数组的长度实例
Oct 31 Javascript
js判断节假日实例代码
Dec 27 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
JS实现百度搜索框关键字推荐
Feb 17 Javascript
vue自定义树状结构图的实现方法
Oct 18 Javascript
使用refresh_token实现无感刷新页面
Apr 26 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
降低PHP Redis内存占用
2017/03/23 PHP
PHP7扩展开发之基于函数方式使用lib库的方法详解
2018/01/15 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
PHP网页缓存技术优点及代码实例
2020/07/29 PHP
DWR Ext 加载数据
2009/03/22 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
JS中的this变量的使用介绍
2013/10/21 Javascript
jQuery控制网页打印指定区域的方法
2015/04/07 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
最常见和最有用的字符串相关的方法详解
2017/02/06 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
python实现博客文章爬虫示例
2014/02/26 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
商务英语专业应届毕业生求职信
2013/10/28 职场文书
体育教育个人自荐信范文
2013/12/01 职场文书
会计职业生涯规划书
2014/01/13 职场文书
职工运动会邀请函
2014/02/02 职场文书
道路建设实施方案
2014/03/18 职场文书
考试保密承诺书
2014/08/30 职场文书
关于教师节的演讲稿
2014/09/04 职场文书
行政工作试用期自我评价
2014/09/14 职场文书
法院授权委托书格式
2014/09/28 职场文书
2014年音乐教师工作总结
2014/12/03 职场文书
2014个人年度工作总结
2014/12/15 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
检讨书范文大全
2015/05/07 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
让世界充满爱观后感
2015/06/10 职场文书
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers