您现在的位置：陈设世家 >> 网络垃圾桶 >> 知识碎片 >> 备用知识 >> 文章正文rss

仿windows选项卡效果拾零

以上所列几种选项卡虽然表现形式不同，但一般是几个选项卡（导航标签）的合计宽度不应超过其选项栏内容的宽度。
海娃的那个例子也不错,跟我引述的第三个例子类似。

ul.TabBarLevel1 li a:link,ul.TabBarLevel1 li a:visited{
	color:#333;
}
ul.TabBarLevel1 li a:hover,ul.TabBarLevel1 li a:active{
	color:#F30;
	text-decoration:none;
}
ul.TabBarLevel1 li.Selected a:link,ul.TabBarLevel1 li.Selected a:visited{
	color:#000;
}
ul.TabBarLevel1 li.Selected a:hover,ul.TabBarLevel1 li.Selected a:active{
	color:#F30;
	text-decoration:none;
}
div.HackBox {
  padding : 2px 2px ;
  border-left: 2px solid #6697CD;
  border-right: 2px solid #6697CD;
  border-bot<a class="channel_keylink" href="http://www.tom.com">TOM</a>: 2px solid #6697CD;
  display:none;
}

</style>

<div id="Whatever">
	<ul class="TabBarLevel1" id="TabPage1">
		<li id="Tab1"><a href="#" onclick="javascript:switchTab('TabPage1','Tab1');">子虚乌有</a></li>
		<li  id="Tab2" class="Selected"><a href="#" onclick="javascript:switchTab('TabPage1','Tab2');">金翅擘海</a></li>
		<li  id="Tab3"><a href="#" onclick="javascript:switchTab('TabPage1','Tab3');"><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></a></li>
		<li  id="Tab4"><a href="#" onclick="javascript:switchTab('TabPage1','Tab4');">我太低调</a></li>
	</ul>
	<div id="cnt">
	<div id="dTab1" class="HackBox">我为每一次的快乐而哭泣，我为每一次的悲伤而微笑。
	</div>
	<div id="dTab2" class="HackBox" style="display:block">【※卡秀儿<a class="channel_keylink" href="http://heewoo.com.cn/" target="_blank">精品</a>屋※】

</div>
	<div id="dTab3" class="HackBox">学习是件头疼的事，为了能活下去我不得不<a class="channel_keylink" href="http://www.chenzhixin.cn" target="_blank">学习</a>

</div>
	<div id="dTab4" class="HackBox">仍然拣尽寒枝不肯安歇 微带着后悔 寂寞沙洲我该思念谁
	</div>
	</div>
</div>
<script language="JavaScript">
//Switch Tab Effect
function switchTab(tabpage,tabid){
        var oItem = document.getElementById(tabpage);   
	for(var i=0;i<oItem.children.length;i++){
		var x = oItem.children(i);	
		x.className = "";
		var y = x.getElementsByTagName('a');
		y[0].style.color="#333333";
	}	
	document.getElementById(tabid).className = "Selected";
	var dvs=document.getElementById("cnt").getElementsByTagName("div");
	for (var i=0;i<dvs.length;i++){
	  if (dvs[i].id==('d'+tabid))
	    dvs[i].style.display='block';
	  else
  	  dvs[i].style.display='none';
	}
}

</script>

查看演示

<html>
<head>
<title>test</title>
<style>
td,a,body{font-size:9pt;}
.DivAround_focus{cursor:pointer;background-color:#A1ACDB;border-right:solid 1px #A1ACDB;border-bottom:solid 1px #333333; border-left:solid 1px #C8CEEA;  border-top:solid 1px #C8CEEA;color:#000000}
.DivAround_blur{cursor:pointer;background:#4D5C9F;border-right:solid 1px #eeeeee;border-bottom:solid 1px #333333; border-left:solid 1px #798ACC;  border-top:solid 1px #A1ACDB;color:#FFFFFF}
.DivAround_content{background-color:#A1ACDB;border-right:solid 1px #888888;border-bot<a class="channel_keylink" href="http://www.tom.com">TOM</a>:solid 1px #555555; border-left:0px; border-top:solid 1px #C8CEEA;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<script language="javascript">
var AroundInfoArray=new Array();
AroundInfoArray[0]="咖啡厅的内容";
AroundInfoArray[1]="学校的内容";
AroundInfoArray[2]="酒店的内容";
function ChangeFocus(obj)
{
for(i=0;i<document.getElementById("leftButtonTAble").rows.length;i++)
{
	if(document.getElementById("leftButtonTAble").rows[i].cells[0]==obj)
	{
		document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_focus";
		document.getElementById("DivAroundContent").innerHTML=AroundInfoArray[i];
	}else{
		document.getElementById("leftButtonTAble").rows[i].cells[0].className="DivAround_blur";
	}
}
}
</script>
<table cellpadding="0" cellspacing="0" border="0" align="center" bgcolor="#6271B1"><tr><td width="84" valign="top">
			<table cellpadding="0" cellspacing="0" border="0" height="407" width="84" id="leftButtonTAble">
				<tr><td height="25" align="center" class="DivAround_focus" onClick="ChangeFocus(this)">咖啡厅</td></tr>
				<tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)"><a class="channel_keylink" href="http://www.chenzhixin.cn/" target="_blank">学校</a></td></tr>
				<tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">酒店</td></tr>
				<tr><td style="border-right:solid 1px #eeeeee">&nbsp;</td></tr>
			</table>
		</td><td width="360">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="DivAround_content">
				<tr><td height="406" valign="top" style="padding:4px" id="DivAroundContent">内容</td></tr>
			</table>
		</td></tr>
		</table>
		<script language="javascript">ChangeFocus(document.getElementById("leftButtonTAble").rows[0].cells[0]);</script>
</body></html>

查看演示

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>menu</title>
<base target="_blank">
<style>
A:link {COLOR: #0000cc; TEXT-DECORATION: underline}
A:visited {COLOR: #551a8b; TEXT-DECORATION: underline}
A:active{COLOR: #ff0000; TEXT-DECORATION: none}
A:hover {COLOR: #ff0000; TEXT-DECORATION: underline}
body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px; 
 background-color: #ffffff;
 color: #000000;
 font-size: 12px;
}
td{
 font-size:12px;
 line-height: 150%;
}
.white {color: #ffffff}
.cardNormal {
 CURSOR: hand;
 COLOR: #000000;
 font-size:12px;
 BACKGROUND-COLOR: #FFFFFF;
 border-top: 1px solid #0A6CCE;
 border-right: 1px solid #0A6CCE;
 border-bottom: 1px solid #0A6CCE;
 border-left: 1px solid #0A6CCE;
}
.cardSelected {
BORDER-left: 1px solid #0A6CCE;
 BORDER-RIGHT: 1px solid #0A6CCE;
 BORDER-TOP: 1px solid #0A6CCE;
 FONT-WEIGHT: normal;
 CURSOR: hand;
 COLOR: #000000;
 font-size:12px;
 BACKGROUND-COLOR: #E1EFFD;
}
.boardMain {
 BORDER-RIGHT: 1px solid #dbe9fd;
 BORDER-LEFT: 1px solid #dbe9fd;
 COLOR: #F1AB65;
 LINE-HEIGHT:200%;
 BORDER-BOTTOM:1px solid #0A6CCE;
BORDER-left: 1px solid #0A6CCE;
 BORDER-RIGHT: 1px solid #0A6CCE;
 BACKGROUND-COLOR:#E1EFFD;
}
.cardSpace {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
.cardSpaceLeft {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
.cardSpaceLast {
BORDER-BOTTOM:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
BORDER-BOT<a class="channel_keylink" href="http://www.tom.com">TOM</a>:1px solid #0A6CCE; BACKGROUND-COLOR: #FFFFFF
}
A.nav1:link {COLOR: #000000; TEXT-DECORATION: none}
A.nav1:visited {COLOR: #000000; TEXT-DECORATION: none}
A.nav1:active,A.nav1:hover {COLOR:#000000; TEXT-DECORATION: none}
.erect{
COLOR: #ffffff; 
WRITING-MODE: tb-rl; 
TEXT-ALIGN:left;
letter-spacing:2px;
}
A.nav:link {COLOR: #FFFFFF; TEXT-DECORATION: none}
A.nav:visited {COLOR: #FFFFFF; TEXT-DECORATION: none}
A.nav:active{COLOR: #FFFF00; TEXT-DECORATION: none}
A.nav:hover {COLOR: #FFFF00; TEXT-DECORATION: none}
</style>
</head>
<body bgcolor="#FFFFFF">

<table width="230" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>

<script language=javascript>
function secCard(n)
{
for(i=0;i<secTable.cells.length;i++) 
  secTable.cells[i].className="cardNormal";
secTable.cells[n].className="cardSelected";
for(i=1;i<secTable.cells.length;i=i+2) 
  secTable.cells[i].className="cardSpace";
secTable.cells[n+1].className="cardSpaceLeft";
secTable.cells[3].className="cardSpaceLast";
}
function secBoard(n)
{
for(i=0;i<mainTable.tBodies.length;i++)
mainTable.tBodies[i].style.display="none";
mainTable.tBodies[n].style.display="";
}
</script>
<td width="25" rowspan="2" align="center" bgcolor="#0A6CCE" ><span class="erect">
中国</span></TD>
<td><TABLE width="100%" border=0 align="center" cellPadding=0 cellSpacing=0 class=cardFont id=secTable>
<TBODY>
<TR>
<TD align="center" class="cardSelected" onMouseOver="secCard(0);secBoard(0);" style="padding:0 0 0 0">menu1</TD>
<TD width="2" height="20" class="cardSpace"> </TD>
  <TD align="center" class="cardNormal" style="padding:3 0 0 0" onMouseOver="secCard(2);secBoard(1);">menu2</TD>
<TD width="2" height="20" class="cardSpace"> </TD>

</TR>
</TBODY>
</TABLE></TD>
</TR>
<tr>
<td><TABLE width="100%" height=30 border="0" align="center" cellPadding="5" cellSpacing="0" class="boardMain" id="mainTable">
<TBODY style="DISPLAY: block">
<TR>
<TD align="left" vAlign="middle"><table width="100%" height="75" border="0" cellpadding="0" cellspacing="0">
<tr align="center">
<td>abcde</td>
</tr>
</table></TD>
</TR>
</TBODY>
<TBODY style="DISPLAY: none">
<TR>
<TD align="left" vAlign="middle"><table width="100%" height="100" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="69"><div align="center"></div> 
abcde</td>
</tr>
</table></TD>
</TR>
</TBODY>
</TABLE></TD>
</TR>
</TABLE>
</body></html>

查看演示

-->
</style>

<script>
function bluring(){ 
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus(); 
} 
document.onfocusin=bluring; 
</script>

<script language="javascript">
function switchTag(tag,content)
{
//  alert(tag);
//  alert(content);
  for(i=1; i <3; i++)
  {
    if ("tag"+i==tag)
    {
      document.getElementById(tag).getElementsByTagName("a")[0].className="selectli"+i;
      document.getElementById(tag).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="selectspan"+i;
    }else{
      document.getElementById("tag"+i).getElementsByTagName("a")[0].className="";
      document.getElementById("tag"+i).getElementsByTagName("a")[0].getElementsByTagName("span")[0].className="";
    }
    if ("content"+i==content)
    {
      document.getElementById(content).className="";
    }else{
      document.getElementById("content"+i).className="hidecontent";
    }
    document.getElementById("content").className=content;
  }
}
</script>
</head>
<body>
<div id="top"></div>
<div id="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">金翅擘海</span></a></li>
      <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span><B><font color="#22FF22">知</font><font color="#FF2222">往</font><font color="#001199">观</font><font color="#00fffa">来</font></B></span></a></li>
      <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>子虚乌有</span></a></li>
    </ul>
  </div>
  <div id="content" class="content1">
    <div id="content1">说老实话，办老实事，做老实人。
说谎话的不仅没糖吃，而且还有可能被狼吃掉......</div>
    <div id="content2" class="hidecontent">虚心、踏实、坚韧的<a class="channel_keylink" href="http://www.chenzhixin.cn" target="_blank">学习</a>
老虎不发猫，你当我病危？——蓝色语</div>
    <div id="content3" class="hidecontent">klklklklklkl</div>
  </div>
</div>
<div id="bot<a class="channel_keylink" href="http://www.tom.com">TOM</a>">marvellous &copy;版权所有2000-2006</div>
</body>

查看演示

上一篇文章：仿windows选项卡效果拾零2

下一篇文章：仿windows选项卡效果拾零4

作者：佚名文章来源：本站原创点击数：更新时间：2006-12-27

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

更多关于仿windows选项卡效果拾零的文章
仿windows选项卡效果拾零4 仿windows选项卡效果拾零2 仿windows选项卡效果拾零

热门影视
最新电视剧

·用博客寻找爱情	·厦门人就上厦门顶牛社区	·星期天去哪聚会	·免费发布企业招聘
·在线一亿片视频观看	·挑战美女无极限	·创建我的书签	·我要卖东西,买东西

仿windows选项卡效果拾零

更多关于 仿windows选项卡效果拾零 的文章

更多关于仿windows选项卡效果拾零的文章