四种Tab选项卡d的方法
四种Tab选项卡
第一种：使用纯CSS的display:block跟none。
第二种：使用JS实现内容切换。
第三种：使用后台语言对局部加载内容。
第四种：直接页面切换。（欺骗用户视觉）
第一种，适用于制作菜单，因为只有一次http请求，而且变换内容少。也就是说加载其它TAB面板的同时不会影响第一次加载。另外这个是含有“伪类”，所以下面这个页面在IE6及以下版本不支持。
第二种，第二种方法跟第二种一样，只是可以兼容IE6及以下版本的兼容问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#left_con {width:254px;float:left;}
#nav_sub dt {height:30px;background:#dff4f9;border-bottom:1px solid #ccc;line-height:30px;padding-left:30px;}
#nav_sub dd {background:#f6f6f6;border-bottom:1px solid #ccc;display:none;}
#nav_sub dl.over dd {display:block !important;}
#nav_sub dd a {height:30px;line-height:30px;display:block;padding-left:50px;}
#nav_sub dd a:hover {background:#000;color:#fc0;}
</style>
<script type="text/javascript">
function setNavEvent(){
var i;
var objlist=document.getElementById("nav_sub");
for(i=0;i<objlist.childNodes.length;i++){
node=objlist.childNodes[i];
if(node.nodeName=="DL"){
node.οnmοuseοver=function(){
this.className+=" over";
}
node.οnmοuseοut=function(){
this.className=this.className.replace(" over","");
}
}
}
}
window.οnlοad=setNavEvent;
</script>
</head>
<body>
<div id="left_con">
<dl id="nav_sub">
<dl style="float:left:">
<dt>AAAA</dt>
<dd><a href="#">a01</a></dd>
<dd><a href="#">a02</a></dd>
<dd><a href="#">a03</a></dd>
<dd><a href="#">a04</a></dd>
<dd><a href="#">a05</a></dd>
</dl>
<dl style="float:left:">
<dt>BBBB</dt>
<dd><a href="#">b01</a></dd>
<dd><a href="#">b02</a></dd>
<dd><a href="#">b03</a></dd>
<dd><a href="#">b04</a></dd>
</dl>
</dl>
</div>
</body>
</html>
下面这个代码来时《CSS那些事儿》的源代码（其中的javascript代码有修改）：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312">
<title>Tab选项卡</title>
<style type="text/css">
#tab {position:relative;width:570px;}
#tab div{position:absolute;top:26px;left:0;width:564px;border:solid #D4D3D3;border-width:0 1px 1px;}
#tab div{display:none;}
#tab .block{display:block;padding-bottom:10px;}
#tab h3{float:left;width:114px;height:26px;margin:0 -1px 0 0;line-height:26px;font-size:14px;font-weight:normal;text-align:center;color:#00007F;background:#EEE;cursor:pointer;}
#tab .up{background:#FFF;}
#tab ul{margin:15px 0 0;padding:0;list-style:none;}
#tab li{display:inline;float:left:width:47.0%;height:22px;margin:0 1%;line-height:22px;text-indent:10px;border-bottom:1px dashed #DEDEDE;}
#tab li a{font-size:12px;text-decoration:none;text-indent:10px;color:#333;}
#tab li a:hover{text-decoration:underline;color:#ff0000;}
</style>
</head>
<body>
<div id="tab">
<h3 class="up" οnmοuseοver="go_to(1);">选择一</h3>
<div class="block">
<ul>
<li><a href="#">1 张玉和于连的同源悲剧1 张玉和于连的同源悲剧</a></li>
<li><a href="#">从人代表侯建军终审</a></li>
</ul>
</div>
<h3 οnmοuseοver="go_to(2);">选择二</h3>
<div>
<ul>
<li><a href="#">2 张玉和于连的同源悲剧车辆交付问题</a></li>
<li><a href="#">从人代表侯建军终审</a></li>
</ul>
</div>
<h3 οnmοuseοver="go_to(3);">选择三</h3>
<div>
<ul>
<li><a href="#">3 张玉和于连的同源悲剧车辆交付问题</a></li>
<li><a href="#">从人代表侯建军终审</a></li>
</ul>
</div>
<h3 οnmοuseοver="go_to(4);">选择四</h3>
<div>
<ul>
<li><a href="#">4 张玉和于连的同源悲剧车辆交付问题</a></li>
<li><a href="#">从人代表侯建军终审</a></li>
</ul>
</div>
<script type="text/javascript">
var h=document.getElementById("tab").getElementsByTagName("h3");
var d=document.getElementById("tab").getElementsByTagName("div");
function go_to(ao){
for(var i=0;i<h.length;i++){
if(ao-1==i){
h[i].className+="up";
d[i].className+="block";
}
else{
h[i].className=" ";
d[i].className=" ";
}
}
}
</script>
</div>
</body>
</html>
第三种方法。使用PHP语言动态加载，这种方法涉及到后台技术，前两种方法只是静态加载。不过可以实现局部刷新页面。
第四种方法。就是直接切换到不同页面，但是这种方法也有一定的适用性，因为当TAB面板占很大空间时，这样做的话就可以减少用户第一次加载的时间，如果用第一种方法的话，第一次打开页面就从服务器加载全部内容，会浪费用户的时间，影响交互效果。另外，如果框架基本一样的，那些背景图片都在浏览器缓存里，这样重新打开下一个页面也不会太久。
四种Tab选项卡d的方法相关推荐
- 【更新】四种WinRAR永久去广告方法
四种WinRAR永久去广告方法 Winrar官网下载地址 我的电脑是64位的 就以64位版本进行介绍 方法一: 用Spy++查看广告窗口类名 打开x64dbg附加winrar.exe,运行至winra ...
- postgresql源码学习（57）—— pg中的四种动态库加载方法
一. 基础知识 1. 什么是库 库其实就是一些通用代码,可以在程序中重复使用,比如一些数学函数,可以不需要自己编写,直接调用相关函数即可实现,避免重复造轮子. 在linux中,支持两种类型的库: 1. ...
- 电子计算机机房折旧提几年,IDC设备资产运营中四种“折旧率计算”的常见方法...
原标题:IDC设备资产运营中四种"折旧率计算"的常见方法 数据中心基础设施设备管理中设备的折旧是固定资产的折旧.该基础设施设备或者IT设备在长期使用后仍可保持其原始物理形态,但由于 ...
- 【AHK】【VBA】word四种设置自定义快捷键的方法
突然发现word有四种设置快捷键的方法,首先介绍的两种是word自带的设置方式:一种是AHK的设置方法,以一个简单例子即可上手:最后一种是方法的合体. 方法一 首先是左上角的这个快速工具区,是可以自定 ...
- 四种利用C#播放声音的方法
本文将介绍利用C#播放声音的四种方法,希望那个通过本文,大家能在C#播放声音方面有所突破.本文使用的是微软的播放器,其他播放器大家可以尝试. 第一种是利用DirectX 1.安装了DirectX SD ...
- 怎么重置imac_如何重置Mac Pro？四种重置Macbook Pro的方法
点击苹果菜单,选择"休眠",让你的MacBook进入休眠模式.在机器进入睡眠模式后,按下某一按键唤醒它. 故障: 你想让文件继续运行,而不是关闭计算机. 解决方案: 让你的MacB ...
- arcmap中图斑面积代表_【干货】ArcGIS四种计算图斑面积的方法
用精细的过程管理模式提供优质的服务 用先进的地理信息技术推动社会的发展 ArcGIS中有多种方法可计算出图斑面积 本文总结了四种方法 01 计算几何 本人认为这是最适合非专业人士的方法,直接利用Arc ...
- [数据分析干货]四种简单常用的数据分析方法，学完立马升职加薪！
你是否做了N个渠道推广,却不知道钱花的效果怎么样? 你是否用数据做了很多图表,但是只知道表象却不会深入分析现象背后发生了什么,得不出什么有效的结论? 今天就来给大家分享4种最常用的数据分析方法,让你在 ...
- php是什么文件？怎么打开？四种打开php格式文件方法是什么？（图）
PHP是一个网页脚本,文件后缀名为.php,如上图: 但不同于html xml 标签语言,直接可以通过浏览器打开,php文件需要有PHP的运行环境才可以访问和打开,如果只是编辑PHP文件,只需要用: ...
最新文章
- 网络营销外包——网络营销外包专员是如何提升网站权重数值的？
- python 元组使用_Python3
- 随机排列_图片视频特效一键生成，27 种特效可随机排列组合！
- Java中“/”，“.”所代表的文件路径
- openshift 部署_在OpenShift上部署Java EE微服务
- java 简单类继承
- 详版大数据报告_《2018抖音大数据报告》完整版，赶快收藏！
- Java 进口管制限制解除
- 计算机目标作文,人生的目标作文（精选5篇）
- Tracup｜10个有效的工作习惯，成功的例子和技巧
- 读书笔记 之《软件架构设计: 大型网站技术架构与业务架构融合之道》
- element ui 级联选择器，渲染后不显示数据
- MMDetection亲测安装教程
- 题解 洛谷 P4042 [AHOI2014/JSOI2014]骑士游戏
- Android 实现京东秒杀功能详解
- HDU2527 Safe Or Unsafe（哈夫曼的一道简单题）
- openNI驱动控制kinect马达
- python培训视频课 知乎
- Android多线程编程（一）- 线程基础
- Configure hp 磁带库 Fibre Channel Card
热门文章
- Caused by: org.hibernate.PropertySetterAccessException: IllegalArgumentException
- 相位？相位差？全局相位和局部相位的数学逻辑是什么？
- 【SQL查询系列】子查询经典案例
- SEO基础：什么是结构化数据？
- Synergy实现一套鼠标和键盘控制两台电脑
- 机器学习实战：小麦种子（封装函数进行调参、标准化、绘图查看数据分布）
- 麦语言和python区别_麦语言编程教程之二：解决两大类问题
- 史上最全的Stata外部命令一览
- Springboot使用Maven项目使用 Profiles和Spring Profile进行多环境配置 动态激活指定
- 春田花花幼稚园校歌 (普通话版)铃声 春田花花幼稚园校歌 (普通...