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

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

效果图：

实现代码：

<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>

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

赞 (0)

相关推荐

  • 原生js实现tab选项卡切换

    原生js实现tab选项卡切换

    本文实例为大家分享了原生js实现tab选项卡切换效果的代码,供大家参考,具体内容如下 1.html部分  <body> <div id="tab"> <div class="tab_menu"> <ul> <li class="selected"><a href="#">时事</a></li> <li><a hre

  • 很棒的js选项卡切换效果

    很棒的js选项卡切换效果

    本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下 js选项卡切换代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Auth

  • JavaScript仿网易选项卡制作代码

    JavaScript仿网易选项卡制作代码

    如果你的页面只有一个tab(选项卡)切换的地方,需要调用js效果,如果单独为了它,还要为页面加载一个jQuery插件,想必是极痛苦的.所有很多时候,jQuery特效也不是万能的,偶尔来个原生的js效果也是必须的.今天闲着无聊,用js和jquery分别写了一个选项卡的效果,但是其中用到jquery只是为了更好的获取标签以及修改样式. 先来浏览一下效果图吧~~ 一.Javascript实现 1.html布局 <div id="box"> <div class="

  • 很实用的js选项卡切换效果

    很实用的js选项卡切换效果

    本文实例为大家分享了js实现简单的选项卡切换效果的具体代码,供大家参考,具体内容如下 js选项卡切换代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="gb2312"> <title>实践题 - 选项卡</title> <style type="text/css"> *{ margin:0px; p

  • 很棒的js Tab选项卡切换效果

    本文实例为大家分享了js Tab选项卡切换效果,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style> *{margin:0; padding:0; list-style:none;} .box{ width: 1000px; over

  • 轻松实现js选项卡切换效果

    轻松实现js选项卡切换效果

    这是要实现的效果图: 一.HTML页面布局 <!-- HTML页面布局 --> <ul class="tab_menu"> <li class="selected">房产</li> <li>家居</li> <li>二手房</li> </ul> <div class="tab_box"> <div> 275万购昌平邻铁

  • 基于javascript实现tab选项卡切换特效调试笔记

    基于javascript实现tab选项卡切换特效调试笔记

    本文实例为大家分析了javascript实现tab选项卡切换的调试笔记,供大家参考,具体内容如下 制作导航栏,点击导航栏元素时下面的内容会产生相应的变化,并且该元素显示特殊样式. js源代码: //导航栏单击变换内容 function tabSwitch(_this,num) { var tag = document.getElementById("nav9"); var number = tag.getElementsByTagName("a"); //获取导航栏

  • 基于javascript实现最简单的选项卡切换效果

    本文实例为大家分享了js选项卡切换效果的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>朱朱制作</title> <script src="js/jquery.js" type="text/javascript"></script> &

  • 分步解析JavaScript实现tab选项卡自动切换功能

    本文分享一个能够实现自动切换的选项卡功能,并给出它的具体实现过程. 关于选项卡大家一定不会陌生,应用非常的频繁,通常选项卡都是需要点击或者划过才能够实现切换. 代码实例如下: <html> <head> <meta charset=" utf-8"> <title>tab切换</title> <style type="text/css"> body,h2,p{ margin:0px; paddi

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

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

    本文实例为大家分享了js选项卡效果的具体实现代码,供大家参考,具体内容如下 效果图: 实现代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body{ font

  • JavaScript+CSS无限极分类效果完整实现方法

    本文实例讲述了JavaScript+CSS无限极分类效果完整实现方法.分享给大家供大家参考,具体如下: CSS样式: a {text-decoration:none;} a,a:visited {color:#000;background:inherit;} body {margin:0;padding:20px;font:12px tahoma,宋体,sans-serif;} dt {font-size:22px;font-weight:bold;margin:0 0 0 15px;} dd

  • jquery多选项卡效果实例代码(附效果图)

    jquery多选项卡效果实例代码(附效果图)

    复制代码 代码如下: <script type="text/javascript">    $(function() {        $(".designerspanel").each(function(){            $(this).find(".tabspanel #show:not(:first)").hide();        }); $(".designerspanel li").clic

  • JS实现选项卡效果的代码实例

    选项卡这个效果估计以后的项目会经常涉及到,对代码还是半熟练的情况下还是写下来吧. 先来布局一个简单的页面: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none;} #box

  • layui选项卡效果实现代码

    layui选项卡效果实现代码

    本文实例为大家分享了layui选项卡的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <link rel="stylesheet" href="layui/css/layui.css"> </head> <body&

  • 微信小程序 实现tabs选项卡效果实例代码

    微信小程序 实现tabs选项卡效果实例代码

    最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已经封装完了,正好发现没有tab选项卡效果,这两天正好研究了下.思路如下: 1.首先点击导航的时候需要两个变量,一个存储当前点击样式类,一个是其它导航默认的样式类 2.选项卡内容列表同样也需要两个变量,一个存储当前显示块,一个存储的是其它隐藏的默认块 3.使用三目运算通过点击获取导航索引,根据索引判断

  • Javascript+CSS实现影像卷帘效果思路及代码

    用过Arcgis的筒子们对于Arcmap里面的一个卷帘效果肯定记忆很深刻,想把它搬到自己的WebGIS系统中去,抱着同样的想法,我也对这种比较炫的卷帘效果做了一下研究,吼吼,出来了,给大家汇报一下成果 看到这样的效果,你是不是小鸡动了一下,嘿嘿,别急,听我慢慢道来. 首先,容器.分别用两个DIV来显示两个不同时期的影像.接下来设置两个容器的样式,代码: #after{ position: absolute; top: 0px; left: 0px; background-image: url(.

  • JavaScript CSS创建右击菜单效果代码

    JavaScript CSS创建右击菜单效果代码

    效果图:  css和javascript创建页面右键菜单 body { font-family: "宋体"; font-size: 12px; } .skin0 { padding-top: 4px; text-align: left; width: 100px; border: 2px solid black; background-color: menu; font-family: "宋体"; line-height: 20px; cursor: default

  • javascript横排竖排标准选项卡效果代码

    PRcss的选项卡 www.jb51.net 首页 嘿嘿,无视div原始class值. 测试 继续无视h3原始class值. 无聊 h3没有值也可以- 傻蛋 div没有值一样可以- 首页 嘿嘿,无视容器原始class值. 测试 继续无视h3原始class值. 无聊 h3没有值也可以- 傻蛋 div没有值一样可以- 首页 嘿嘿,无视h3原始class值. 测试 继续无视div原始class值. 无聊 h3没有值也可以- 傻蛋 class值相似一样也可以- 指定class后,即时再多一个div也行.

  • 用javascript来实现动画导航效果的代码

    用javascript来实现动画导航效果的代码

    谁在用这些导航 google是个大公司,全世界都有google的脚印,韩国的google动画效果非常不错,蓝色理想论坛里已经有人挖过来了,可惜js写的太多了,那自己写一个吧?好,就这么干! 原理 小时候,总喜欢看动画片吧,动画片是怎样实现的呢?记得妈妈说是一张画一张画切换过去(啊?那一部葫芦兄弟要画多少副画啊? -_-! ),其实我们现在做的也是这样,用一个图片,这个图片里有很多个小图,来显示动画轨迹.按时间来移动图片,那图片不是会动了啊?(不知道,表达清楚了没-语文很重要啊!!) 准备 我们需

随机推荐