DIV模擬TAB選項卡

2024-04-27 15:16:13

字體：大中小

來源：轉載

供稿：網友

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>DIV模擬TAB選項卡</title><style type="text/CSS">.tab_name {	width: 980px;	height: 44px;	border-bottom: 2px solid #ccc;}.tab_name .tab_PRo {	width: 150px;	height: 42px;	line-height: 40px;	margin-right: 10px;	border: 2px solid #F00;	border-bottom: 2px solid #FFF;	float: left;	text-align: center;}.tab_name .tab_ping {	width: 180px;	height: 42px;	line-height: 40px;	margin-right: 10px;	float: left;	text-align: center;}.tab_name .tab_shai {	width: 180px;	height: 42px;	line-height: 40px;	margin-right: 10px;	float: left;	text-align: center;}.tab_name .tab_over {	width: 180px;	height: 42px;	line-height: 40px;	margin-right: 10px;	float: left;	text-align: center;}.dtdown_right .tab_ct {	min-height: 200px;/*高度最小值設置為：200px*/	height: auto !important; /*兼容FF,IE7也支持 !important標簽*/	_height: 200px;/*兼容ie6*/	width: 980px;	border-top: 1px solid #ccc;}/**底部結束 選項卡部分*/</style></head><body><div class="tab_name">  <div class="tab_pro" id="tab_pro"><a href="#tab_one" onclick="btnShowList('dt_one' , 'tab_pro');">商品信息</a></div>  <div class="tab_ping" id="tab_ping"><a href="#tab_two" onclick="btnShowList('dt_two' , 'tab_ping');">購買評價</a></div>  <div class="tab_shai" id="tab_shai"><a href="#tab_three" onclick="btnShowList('dt_three' , 'tab_shai');">買家曬單</a></div>  <div class="tab_over" id="tab_over"><a href="#tab_four" onclick="btnShowList('dt_four' , 'tab_over');">成交記錄</a></div></div><div class="tab_ct" name="tab_one" id="dt_one"> 1111 </div><div class="tab_ct" name="tab_two" id="dt_two" style="display:none;"> 2222 </div><div class="tab_ct" name="tab_three" id="dt_three" style="display:none;"> 3333 </div><div class="tab_ct" name="tab_four" id="dt_four" style="display:none;"> 4444 </div><script language="javascript" type="text/Javascript">function btnShowList(showname,tabclass){	var one = document.getElementById("dt_one") ? document.getElementById("dt_one") : Object;	var two = document.getElementById("dt_two") ? document.getElementById("dt_two") : Object;	var three = document.getElementById("dt_three") ? document.getElementById("dt_three") : Object;	var four = document.getElementById("dt_four") ? document.getElementById("dt_four") : Object;	var show = document.getElementById(showname) ? document.getElementById(showname) : Object;		var tab_pro = document.getElementById("tab_pro") ? document.getElementById("tab_pro") : Object;	var tab_ping = document.getElementById("tab_ping") ? document.getElementById("tab_ping") : Object;	var tab_shai = document.getElementById("tab_shai") ? document.getElementById("tab_shai") : Object;	var tab_over = document.getElementById("tab_over") ? document.getElementById("tab_over") : Object;	var tabclass = document.getElementById(tabclass) ? document.getElementById(tabclass) : Object;			if(tabclass != Object){		if(tab_pro != Object) {			tab_pro.style.border = "none";		}		if(tab_ping != Object) {			tab_ping.style.border = "none";		}		if(tab_shai != Object) {			tab_shai.style.border = "none";		}		if(tab_over != Object) {			tab_over.style.border = "none";		}		if(tabclass != Object) {			tabclass.style.border = "2px solid #F00";			tabclass.style.borderBottom="2px solid #FFF";		}	}		if(show != Object){		if(one != Object) one.style.display = "none";		if(two != Object) two.style.display = "none";		if(three != Object) three.style.display = "none";		if(four != Object) four.style.display = "none";		if(show != Object) show.style.display = "block";	}	}</script></body></html>