四种Tab选项卡d的方法
来源：互联网 发布：mac apache php7 编辑：程序博客网 时间：2024/05/17 09:11
四种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.onmouseover=function(){
this.className+=" over";
}
node.onmouseout=function(){
this.className=this.className.replace(" over","");
}
}
}
}
window.onload=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" onmouseover="go_to(1);">选择一</h3>
<div class="block">
<ul>
<li><a href="#">1 张玉和于连的同源悲剧1 张玉和于连的同源悲剧</a></li>
<li><a href="#">从人代表侯建军终审</a></li>
</ul>
</div>
<h3 onmouseover="go_to(2);">选择二</h3>
<div>
<ul>
<li><a href="#">2 张玉和于连的同源悲剧车辆交付问题</a></li>
<li><a href="#">从人代表侯建军终审</a></li>
</ul>
</div>
<h3 onmouseover="go_to(3);">选择三</h3>
<div>
<ul>
<li><a href="#">3 张玉和于连的同源悲剧车辆交付问题</a></li>
<li><a href="#">从人代表侯建军终审</a></li>
</ul>
</div>
<h3 onmouseover="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的方法
- easyui选项卡（tab）常用的一些方法
- 简单的Tab选项卡
- 竖排的Tab选项卡
- Qt的Tab选项卡
- Qt的Tab选项卡
- Qt的Tab选项卡
- Qt的Tab选项卡
- tab选项卡的应用
- bootstrap的tab选项卡
- JS Tab切换 选项卡 五种方法
- JS Tab切换 选项卡 五种方法
- jquery 常用方法之选项卡tab
- 两种tab页选项卡的做法
- 三种简洁的Tab网页选项卡
- angular三种tab选项卡的实现
- angular三种tab选项卡的实现
- 最简洁实用的tab切换，tab选项卡
- 动态创建视图时候 AfxCheckDialogTemplate执行出错
- [C#]RecordSet 文本化
- 21
- 获得相应进程
- 22
- 四种Tab选项卡d的方法
- Delphi、PChar和Char数组的比较
- 音频队列服务编程指南(Audio Queue Services Programming Guide)(二)
- 如何使用Smarty模板，使用模板的步骤
- C++继承方式与成员访问规则
- C++ 冒号: 和双冒号 :: 的用法
- java.util.Collections.copy()方法注意点
- 十进制转换为二进制
- 遇上难题
