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 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
javascript 得到文件后缀名的思路及实现
May 09 Javascript
Google (Local) Search API的简单使用介绍
Nov 28 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
vue select组件的使用与禁用实现代码
Apr 10 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
Oct 08 jQuery
解决Vue大括号字符换行踩的坑
Nov 09 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弹出提示框并跳转到新页面即重定向到新页面
2014/01/24 PHP
php实现将字符串按照指定距离进行分割的方法
2015/03/14 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
Laravel框架基础语法与知识点整理【模板变量、输出、include引入子视图等】
2019/12/03 PHP
Javascript的并行运算实现代码
2010/11/19 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
Jquery结合HTML5实现文件上传
2015/06/25 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
vue实现按需加载组件及异步组件功能
2019/05/27 Javascript
vue-video-player视频播放器使用配置详解
2020/10/23 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python和Java进行DES加密和解密的实例
2018/01/09 Python
python生成不重复随机数和对list乱序的解决方法
2018/04/09 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
使用phonegap进行提示操作的具体方法
2017/03/30 HTML / CSS
深入浅析HTML5中的article和section的区别
2018/05/15 HTML / CSS
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
英国在线照明超市:Castlegate Lights
2019/10/30 全球购物
大学生军训自我鉴定
2014/02/12 职场文书
酒店端午节促销方案
2014/02/18 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
2015年教师业务工作总结
2015/05/26 职场文书
毛主席纪念堂观后感
2015/06/17 职场文书
2016年学习雷锋精神广播稿
2015/12/17 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
Python PIL按比例裁剪图片
2022/05/11 Python
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server