table标签+css代码实现选项卡效果(用)
演示效果截图
JavaScript代码
<script language=javascript> function secBoard(n) { for(i=0;i<secTable.cells.length;i++) secTable.cells[i].className="sec1"; secTable.cells[n].className="sec2"; for(i=0;i<mainTable.tBodies.length;i++) mainTable.tBodies[i].style.display="none"; mainTable.tBodies[n].style.display="block"; } </script>
CSS代码
<style type=text/css> td { font-size: 12px; color: #000000; line-height: 150%;} .sec1 { background-color: #EEEEEE; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid #FFFFFF} .sec2 { background-color: #D4D0C8; cursor: hand; color: #000000; border-left: 1px solid #FFFFFF; border-top: 1px solid #FFFFFF; border-right: 1px solid gray; font-weight: bold;} .main_tab { background-color: #D4D0C8; color: #000000; border-left:1px solid #FFFFFF; border-right: 1px solid gray; border-bottom: 1px solid gray;} </style>
HTML代码
<table border=0 cellspacing=0 cellpadding=0 width=500 id=secTable> <tr height=20 align=center> <td class=sec2 width=10% οnclick="secBoard(0)">关于TBODY标记</td> <td class=sec1 width=10% οnclick="secBoard(1)">关于cells集合</td> <td class=sec1 width=10% οnclick="secBoard(2)">关于tBodies集合</td> <td class=sec1 width=10% οnclick="secBoard(3)">关于display属性</td> </tr> </table> <table border=0 cellspacing=0 cellpadding=0 width=500 height=120 id=mainTable class=main_tab> <tbody style="display:block;"> <tr> <td align=center valign=top> <br> <br> <h1>www.865171.cn</h1><br />1</td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align=center valign=top> <br> <br> <h1>www.865171.cn</h1><br />2</td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align=center valign=top> <br> <br> <h1>www.865171.cn</h1><br />3</td> </tr> </tbody> <tbody style="display:none;"> <tr> <td align=center valign=top> <br> <br> <h1>www.865171.cn</h1><br />4</td> </tr> </tbody> </table>
table标签+css代码实现选项卡效果(用)相关推荐
- 用fieldset标签轻松实现Tab选项卡效果
fieldset是一个不常用的HTML标签,它可以将表单内的元素分组显示,legend标签为 fieldset 元素定义标题.由于各浏览器在显示fieldset和legend结构时会自动为其添加边框和 ...
- 纯Css制作tab选项卡
Css本身的功能就很强大的,尤其是Css3出来之后,大部分特效只用Css3就能完成了,无需再费心思去研究js.jQuery该怎么怎么去写,代码简洁方便.下面这个是用纯Css制作的tab选项卡效果: 用 ...
- HTML table标签的行列合并
HTML table标签的行列合并 实现效果 代码 <!DOCTYPE html> <html lang="en"> <head><met ...
- css实现翻牌抽奖效果
css实现翻牌抽奖效果 实现效果 React代码 css代码 总结 实现效果 React代码 import React,{FC,useEffect,useState} from 'react' imp ...
- html5对代码自动排版,HTML5系列:通过JS+DIV+CSS排版布局实现选项卡效果
CSS介绍及布局特点 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. CSS目前最新版本为CSS3,是能够真正做到网页表现 ...
- css 实现标签切换,CSS_纯CSS实现Tab切换标签效果代码,本文实例讲述了纯CSS实现Tab切 - phpStudy...
纯CSS实现Tab切换标签效果代码 本文实例讲述了纯CSS实现Tab切换标签效果代码.分享给大家供大家参考.具体如下: 这是一款纯CSS实现的Tab简洁版,很不错的效果,希望大家喜欢. 运行效果截图如 ...
- html设置table表格的弧度,用CSS3和table标签实现一个圆形轨迹的动画的示例代码
html:其实就是根据table标签把几个实心圆div进行等边六角形的排布,并放入一个div容器中,然后利用CSS3的循环旋转的动画效果对最外层的div容器进行自转实现,当然不要忘了把div容器的外边 ...
- 通过JS+DIV+CSS排版布局实现选项卡效果
2019独角兽企业重金招聘Python工程师标准>>> CSS介绍及布局特定 层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文 ...
- css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...
最新文章
- Lync2013与Exchange2013集成先决条件(十九)
- 路飞学院-Python爬虫实战密训班-第2章
- 用window.location.href实现刷新另个框架页面
- 4-Qt6控制台项目信号与槽
- C++ 深复制与浅复制 RVO问题
- 20应用统计考研复试要点(part38)--概率论与数理统计
- 佟年计算机天才不会打游戏,《亲爱的热爱的》佟年爱得卑微?其实是韩商言,爱得不够勇敢...
- 框架模式和设计模式的区别
- 《深入理解 Spring Cloud 与微服务构建》第十二章 服务注册和发现 Consul
- 计算机专业技能水平如何提升,市计算机:提升技能水平
- my log4crc
- This ZooKeeper instance is not currently serving requests
- Q96:PT(3):基于噪声的纹理(Noise-Based Textures)(0)——概述
- android判断密码字符串,逆向分析苏宁易购安卓客户端加密到解密获取明文密码(附demo验证) | WooYun...
- 群体智能优化算法之蚁群优化算法(ACO)
- 中文ssid linux,分享|LinSSID:一款Linux下的图形化Wi-Fi扫描器
- java web 微博系统_【Java项目】——Java Web完整项目(微博系统)-Go语言中文社区...
- 支持ECSHOP 2.73手机客户端
- excel文件无法打印提示内存不足_Mac应用程序无法打开提示不明开发者或文件损坏的处理方法
- [Ubuntu] Ubuntu16.04+win10+联想Y7000+显卡+WIFI 装机成功