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 相关文章推荐
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
May 27 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
jQuery UI AutoComplete 使用说明
Jun 20 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
Javascript之String对象详解
Jun 08 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
微信小程序聊天功能的示例代码
Jan 13 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随机生成福彩双色球号码的2种方法
2013/02/04 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
php处理带有中文URL的方法
2016/07/11 PHP
PHP+Ajax 检测网络是否正常实例详解
2016/12/16 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
浅谈Javascript中匀速运动的停止条件
2014/12/19 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
2016/02/15 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
详解微信小程序Page中data数据操作和函数调用
2017/09/27 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例
2019/03/30 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python中的super用法详解
2015/05/28 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
python目录与文件名操作例子
2016/08/28 Python
Python 专题四 文件基础知识
2017/03/20 Python
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
python图像常规操作
2017/11/11 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
Matlab中plot基本用法的具体使用
2020/07/17 Python
Python可以用来做什么
2020/11/23 Python
学习党代会心得体会
2014/09/05 职场文书
检讨书范文1000字
2015/01/28 职场文书
golang json数组拼接的实例
2021/04/28 Golang
Axios取消重复请求的方法实例详解
2021/06/15 Javascript
Django Paginator分页器的使用示例
2021/06/23 Python
opencv检测动态物体的实现
2021/07/21 Python
python利用while求100内的整数和方式
2021/11/07 Python