四种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的方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 中国医疗器械标准网站（全网最全）
- 下一篇： win10联网进入msn页面，信号出现感