[导入]仿windows选项卡效果

终于在经典论坛找到了一个梦寐以求的选项卡效果，这个效果与众不同的是只要鼠标移上选项就可以了，

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<base href="<a href="http://www.cn-lan.com/" target="_blank">http://www.cn-lan.com/</a>">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="JavaScript">
var txtstr_1="  QQ:28983016  Email:<a href=mailto:451200@126.com>451200@126.com</a>";
var txtstr_2="  需要软件的朋友可以与我联系。";
var txtstr_3="  论坛现在暂时关闭，请朋友们在QQ上联系."
var txtstr_4="  孤独的时候便走向自然；<br>寂寞的时候便走向音乐；<br>失败的时候便走向憧憬；<br>委屈的时候便走向创造和友情。<br>"
function changediv(n){
for(i=1;i<=5;i++){
eval("document.getElementById('s'+i+'').className='under'+n+''");
//此次循环的作用是分别将s开头的ID处的下边界设置为相应的颜色
}
for(i=1;i<=4;i++){
eval("document.getElementById('c"+i+"').className='a"+n+"'");
//此次循环初始化所有的选项卡按钮的背景图片为cb0.gif，银灰色
}
eval("document.getElementById('c"+n+"').className='t"+n+"'");
//然后设置鼠标移动到的相应位置的背景图片为相应的图片，修改对应的样式表。
eval("document.getElementById('bodyt').className='body"+n+"'");
//修改选项卡下半部的样式，使其的色彩与上半部的图片相适应。
bodytxt=eval('txtstr_'+n);
if(bodytxt==""){
alert("数据正在下载，请稍候!");}
else
{
document.getElementById("txt1").innerHTML=bodytxt;
//设置选项卡主体部分相应的文字。
}
}
</script>
<style type="text/css">

</style>
<style type="text/css">

</style>
<style type="text/css">

</style>
</head>

<body>
<table width="294" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr valign="bottom"> 
    <td id="s1" width="8" height="19" class="under1"><br> </td>
    <td id="c1" width="60" align="center" class="t1" onMouseOver="changediv(1)">我佛山人</td>
    <td id="s2" width="8" class="under1"><br> </td>
    <td id="c2" width="60" align="center" class="temp" onMouseOver="changediv(2)">红色黑客</td>
    <td id="s3" width="8" class="under1"><br> </td>
    <td id="c3" width="60" align="center" class="temp" onMouseOver="changediv(3)">蓝色月光</td>
    <td id="s4" width="8" class="under1"><br> </td>
    <td id="c4"  width="60" align="center" class="temp" onMouseOver="changediv(4)"">孤零飘客</td>
    <td id="s5" width="49" class="under1"><br>
</td>
  </tr>
</table>
<table width="294" height="94" border="0" align="center" cellpadding="0" cellspacing="0" class="body1" id="bodyt"><tbody>
  <tr> 
    <td valign="top"><br><div id="txt1">
	<script language="javascript">
	document.write(txtstr_1);
	</script>
	</div> </td>
	
  </tr>
  </tbody>
</table>
<p> </p>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

另外这是一个竖向的效果：

HTML代码

<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-bottom: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)">学校</td></tr>
				<tr><td height="25" align="center" class="DivAround_blur" onClick="ChangeFocus(this)">酒店</td></tr>
				<tr><td style="border-right:solid 1px #eeeeee"> </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>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

还有这个的背景变换：

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
	margin: 0; padding:0
}
body {
	margin-top: 10px;
	margin-right: auto;
	margin-bottom: 10px;
	margin-left: auto;
	text-align: center;
	height: auto;
	width: auto;
	background-color: #666666;
	font-size: 12px;
	color: #000000;
}
#container {
	text-align: left;
	width: 760px;
	height: 400px;
	background-color: #FFFFFF;
	padding: 20px;
}

#container #title {
	height: 28px;
}
#container #title li {
	float: left;
	list-style-type: none;
	height: 28px;
	line-height: 28px;
	text-align: center;
	margin-right: 1px;
}
#container #title ul {
	background-color: #FFFFFF;
	height: 28px;
}
#container #title a {
	text-decoration: none;
	color: #000000;
	display: block;
	width: auto;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</a>) no-repeat left -29px;
}
#container #title a span{
	display: block;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</a>) no-repeat right -29px;
	padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</a>) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
	display: block;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</a>) no-repeat right -87px;
	padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</a>) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
	display: block;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</a>) no-repeat right 0px;
	padding: 0 15px 0 15px;	
}
#container #title #tag3 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</a>) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
	display: block;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</a>) no-repeat right -58px;
	padding: 0 15px 0 15px;	
}
#container #title #tag4 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</a>) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
	display: block;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</a>) no-repeat right -145px;
	padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</a>) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
	display: block; 
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</a>) no-repeat right -174px;
	padding: 0 15px 0 15px;
}
#container #title .selectli1 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</a>) no-repeat left -87px;
}
#container #title a .selectspan1 {
	display: block;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</a>) no-repeat right -87px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli2 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</a>) no-repeat left 0px;
}
#container #title a .selectspan2 {
	display: block; 
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</a>) no-repeat right 0px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli3 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</a>) no-repeat left -58px;
}
#container #title a .selectspan3 {
	display: block; 
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</a>) no-repeat right -58px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli4 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</a>) no-repeat left -145px;
}
#container #title a .selectspan4 {
	display: block; 
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</a>) no-repeat right -145px; 
	padding: 0 15px 0 15px;
}
#container #title .selectli5 {
	text-decoration: none;
	color: #ffffff;
	display: block;
	width: auto;
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</a>) no-repeat left -174px;
}
#container #title a .selectspan5 {
	display: block; 
	background: url(<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</a>) no-repeat right -174px; 
	padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
	height: 300px;
	padding: 10px;
}
.content1 {
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #3A81C8;
	border-right-color: #3A81C8;
	border-bottom-color: #3A81C8;
	border-left-color: #3A81C8;
	background-color: #DFEBF7;
}
.content2 {
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #ff950b;
	border-right-color: #ff950b;
	border-bottom-color: #ff950b;
	border-left-color: #ff950b;
	background-color: #FFECD2;
}
.content3 {
	height: 300px;
	padding: 10px;
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #FE74B8;
	border-right-color: #FE74B8;
	border-bottom-color: #FE74B8;
	border-left-color: #FE74B8;
	background-color: #FFECF5;
}
.content4 {
	height: 300px;
	padding: 10px;
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #00988B;
	border-right-color: #00988B;
	border-bottom-color: #00988B;
	border-left-color: #00988B;
	background-color: #E8FFFD;
}
.content5 {
	height: 300px;
	padding: 10px;
	border-top-width: 3px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #A8BC1F;
	border-right-color: #A8BC1F;
	border-bottom-color: #A8BC1F;
	border-left-color: #A8BC1F;
	background-color: #F7FAE2;
}
.hidecontent {display:none;}
-->
</style>
<script language="javascript">
function switchTag(tag,content)
{
//	alert(tag);
//	alert(content);
	for(i=1; i <6; 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="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="http://thw.568idc.com/blog/#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li>
      <li id="tag2"><a href="http://thw.568idc.com/blog/#" onclick="switchTag('tag2','content2');this.blur();"><span>下载中心</span></a></li>
      <li id="tag3"><a href="http://thw.568idc.com/blog/#" onclick="switchTag('tag3','content3');this.blur();"><span>产品介绍</span></a></li>
      <li id="tag4"><a href="http://thw.568idc.com/blog/#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
      <li id="tag5"><a href="http://thw.568idc.com/blog/#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li>
    </ul>
  </div>
<div id="content" class="content1">
  <div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>	
  <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
  <div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div>
  <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div>
  <div id="content5" class="hidecontent">5、这是使用到的两个图片：
         <table width="58%" border="1" cellspacing="2" cellpadding="0">
           <tr>
             <td width="70%" align="center"><img src="http://thw.568idc.com/blog/<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif</a>" width="250" height="290" /></td>
             <td width="30%" align="center"><img src="http://thw.568idc.com/blog/<a href="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" target="_blank">http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif</a>" width="15" height="290" /></td>
           </tr>
         </table>
  </div>
</div>

</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

文章来源:http://thw.568idc.com/blog/default.asp?id=1070

posted on 2006-09-29 20:24 回味日志阅读(191) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

回味日志

[导入]仿windows选项卡效果

公告

导航