仿Windows經典風格的選項卡Tab

2024-09-05 12:20:23

字體：大中小

來源：轉載

供稿：網友

仿Windows風格的選項卡，灰色有立體感的選項卡，示例內容是用JS控制輸出，只是為了演示功能，你在用的時候完全可以去掉的。

<!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=gb2312" /><title>選項卡</title><style type="text/css">body{	background-color:#CCC;}.tab{	margin:0;	padding:0;	position:absolute;}.tab li{	float:left;	list-style:none;}.tab li span{	float:left;	display:block;	height:20px;	line-height:20px;	position:relative;	border-style:solid;	border-width:1px 1px 0 1px;	border-color:#EEE #999 #777 #DDD;	background-color:#CCC;	margin:1px 2px 0 0;	padding:0 5px 0 5px;	font-size:12px;	cursor:pointer;	z-index:1;}.tab li div{	display:none;	position:absolute;	top:22px;	left:0px;	background-color:#CCC;	border:1px solid;	border-color:#EEE #999 #777 #DDD;	text-align:center;	overflow:auto;}.tab li.selected span{	margin-top:0;	height:22px;}.tab li.selected div{	display:block;}</style><script type="text/javascript">function CreateTab(tab_width,tab_height,parent_obj){	var newtab=document.createElement("UL");	newtab.className="tab";	parent_obj.appendChild(newtab);	Tab.call(newtab);	newtab.style.width=tab_width+"px";	newtab.style.height=tab_height+"px";	return newtab;}function Tab(){	var this_tab=this;	this.selected_page;	this.page_names=new Array();	this.page_contents=new Array();	this.Select=function(){		this_tab.selected_page.className="";		this.className="selected";		this_tab.selected_page=this;	}	this.NewPage=function(page_name){		var newpage=document.createElement("LI");		newpage.onclick=this.Select;		newpage.innerHTML="<span>"+page_name+"</span><div></div>";		this.appendChild(newpage);		newpage.lastChild.style.width=parseInt(this.style.width)-2+"px";		newpage.lastChild.style.height=parseInt(this.style.height)-24+"px";		this.page_names.push(newpage.firstChild);		this.page_contents.push(newpage.lastChild);		return newpage;	}	this.SetChecked=function(page_index){		if(page_index>-1&&this.childNodes.length>page_index){			this.selected_page=this.childNodes[page_index];			this.selected_page.className="selected";		}	}}</script></head><body><script type="text/javascript">var newtab=CreateTab(400,300,document.body);	newtab.NewPage("第一頁");	newtab.NewPage("第二頁");	newtab.NewPage("第三頁");	newtab.NewPage("第四頁");	newtab.NewPage("第五頁");	newtab.SetChecked(0);		newtab.style.top="100px";	newtab.style.left="200px";	for(var i=0;i<newtab.childNodes.length;i++){		newtab.page_contents[i].innerHTML=function(number){			var content_str="";			for(var n=0;n<1;n++){				content_str+="<br />---------------這是第"+number+"頁---------------";			}			return content_str;		}(i+1);	}</script></body></html>

上一篇：CSS 滑動門，自己寫的，沒有圖片

下一篇：純CSS制作雙語導航條