一网情深 >> 精选代码 >> 菜单导航代码 >> 选项卡特效大集合 > 正文

选项卡特效大集合

[来源：来自网络] [作者：不详] [日期：2008-01-29] [热度：]

1.仿淘宝网站的导航标签效果！

HTML代码

body {
text-align:center;
height:auto;
width:auto;
background-color:#666;
font-size:12px;
color:#000;
margin:10px auto;
}

#container {
text-align:left;
width:760px;
height:400px;
background-color:#FFF;
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:#FFF;
height:28px;
}

#container #title a {
text-decoration:none;
color:#000;
display:block;
width:auto;
background:url("/up_files/image/select/tab_selected_left_bk2.gif") no-repeat left -29px;
}

#container #title a span {
display:block;
background:url("/up_files/image/select/tab_selected_right_bk2.gif") no-repeat right -29px;
padding:0 15px;
}

#container #content ul {
margin:10px;
}

#container #content li {
margin:5px;
}

#container #content li img {
display:block;
margin:5px;
}

#container #content {
height:300px;
padding:10px;
}

.content1 {
background-color:#DFEBF7;
border-color:#3A81C8;
border-style:solid;
border-width:3px 1px 1px;
}

.content2 {
background-color:#FFECD2;
border-color:#ff950b;
border-style:solid;
border-width:3px 1px 1px;
}

.content3 {
height:300px;
background-color:#FFECF5;
border-color:#FE74B8;
border-style:solid;
border-width:3px 1px 1px;
padding:10px;
}

.content4 {
height:300px;
background-color:#E8FFFD;
border-color:#00988B;
border-style:solid;
border-width:3px 1px 1px;
padding:10px;
}

.content5 {
height:300px;
background-color:#F7FAE2;
border-color:#A8BC1F;
border-style:solid;
border-width:3px 1px 1px;
padding:10px;
}

.content6 {
height:300px;
background-color:#E7A996;
border-color:#DD5A31;
border-style:solid;
border-width:3px 1px 1px;
padding:10px;
}

.content7 {
height:300px;
background-color:#C29A99;
border-color:#B65E5D;
border-style:solid;
border-width:3px 1px 1px;
padding:10px;
}

.content8 {
height:300px;
background-color:#E8C4FF;
border-color:#B67BD8;
border-style:solid;
border-width:3px 1px 1px;
padding:10px;
}

.hidecontent {
display:none;
}

#container #title #tag1 a:hover,#container #title .selectli1 {
text-decoration:none;
color:#fff;
display:block;
width:auto;
background:url("/up_files/image/select/tab_selected_left_bk2.gif") no-repeat left -87px;
}

#container #title #tag1 a:hover span,#container #title a .selectspan1 {
display:block;
background:url("/up_files/image/select/tab_selected_right_bk2.gif") no-repeat right -87px;
padding:0 15px;
}

#container #title #tag2 a:hover,#container #title .selectli2 {
text-decoration:none;
color:#fff;
display:block;
width:auto;
background:url("/up_files/image/select/tab_selected_left_bk2.gif") no-repeat left 0;
}

#container #title #tag2 a:hover span,#container #title a .selectspan2 {
display:block;
background:url("/up_files/image/select/tab_selected_right_bk2.gif") no-repeat right 0;
padding:0 15px;
}

#container #title #tag3 a:hover,#container #title .selectli3 {
text-decoration:none;
color:#fff;
display:block;
width:auto;
background:url("/up_files/image/select/tab_selected_left_bk2.gif") no-repeat left -58px;
}

#container #title #tag3 a:hover span,#container #title a .selectspan3 {
display:block;
background:url("/up_files/image/select/tab_selected_right_bk2.gif") no-repeat right -58px;
padding:0 15px;
}

#container #title #tag4 a:hover,#container #title .selectli4 {
text-decoration:none;
color:#fff;
display:block;
width:auto;
background:url("/up_files/image/select/tab_selected_left_bk2.gif") no-repeat left -145px;
}

#container #title #tag4 a:hover span,#container #title a .selectspan4 {
display:block;
background:url("/up_files/image/select/tab_selected_right_bk2.gif") no-repeat right -145px;
padding:0 15px;
}

#container #title #tag5 a:hover,#container #title .selectli5 {
text-decoration:none;
color:#fff;
display:block;
width:auto;
background:url("/up_files/image/select/tab_selected_left_bk2.gif") no-repeat left -174px;
}

#container #title #tag5 a:hover span,#container #title a .selectspan5 {
display:block;
background:url("/up_files/image/select/tab_selected_right_bk2.gif") no-repeat right -174px;
padding:0 15px;
}

#container #title #tag6 a:hover,#container #title .selectli6 {
text-decoration:none;
color:#fff;
display:block;
width:auto;
background:url("/up_files/image/select/tab_selected_left_bk2.gif") no-repeat left -203px;
}

#container #title #tag6 a:hover span,#container #title a .selectspan6 {
display:block;
background:url("/up_files/image/select/tab_selected_right_bk2.gif") no-repeat right -203px;
padding:0 15px;
}

#container #title #tag7 a:hover,#container #title .selectli7 {
text-decoration:none;
color:#fff;
display:block;
width:auto;
background:url("/up_files/image/select/tab_selected_left_bk2.gif") no-repeat left -232px;
}

#container #title #tag7 a:hover span,#container #title a .selectspan7 {
display:block;
background:url("/up_files/image/select/tab_selected_right_bk2.gif") no-repeat right -232px;
padding:0 15px;
}

#container #title #tag8 a:hover,#container #title .selectli8 {
text-decoration:none;
color:#fff;
display:block;
width:auto;
background:url("/up_files/image/select/tab_selected_left_bk2.gif") no-repeat left -261px;
}

#container #title #tag8 a:hover span,#container #title a .selectspan8 {
display:block;
background:url("/up_files/image/select/tab_selected_right_bk2.gif") no-repeat right -261px;
padding:0 15px;
}
-->
</style>
<script language="javascript">
function switchTag(tag,content)
{
//	alert(tag);
//	alert(content);
	for(i=1; i <9; 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>
<table width="950" border="0" align="center">
<tr>
<td height="94" colspan="3"><div id="container">
<div id="title">
<ul>
<li id="tag1"><a href="#" _fcksavedurl="#" onclick_fckprotectedatt="%20onclick%3D%22switchTag('tag1'%2C'content1')%3Bthis.blur()%3B%22" class="selectli1"><span class="selectspan1">首页</span></a></li>
<li id="tag2"><a href="#" _fcksavedurl="#" onclick_fckprotectedatt="%20onclick%3D%22switchTag('tag2'%2C'content2')%3Bthis.blur()%3B%22"><span>产品介绍</span></a></li>
<li id="tag3"><a href="#" _fcksavedurl="#" onclick_fckprotectedatt="%20onclick%3D%22switchTag('tag3'%2C'content3')%3Bthis.blur()%3B%22"><span>连锁加盟</span></a></li>
<li id="tag4"><a href="#" _fcksavedurl="#" onclick_fckprotectedatt="%20onclick%3D%22switchTag('tag4'%2C'content4')%3Bthis.blur()%3B%22"><span>CCSOS常识</span></a></li>
<li id="tag5"><a href="#" _fcksavedurl="#" onclick_fckprotectedatt="%20onclick%3D%22switchTag('tag5'%2C'content5')%3Bthis.blur()%3B%22"><span>培训资讯</span></a></li>
<li id="tag6"><a href="#" _fcksavedurl="#" onclick_fckprotectedatt="%20onclick%3D%22switchTag('tag6'%2C'content6')%3Bthis.blur()%3B%22"><span>长沙旗舰馆</span></a></li>
<li id="tag7"><a href="#" _fcksavedurl="#" onclick_fckprotectedatt="%20onclick%3D%22switchTag('tag7'%2C'content7')%3Bthis.blur()%3B%22"><span>提问区</span></a></li>
<li id="tag8"><a href="#" _fcksavedurl="#" onclick_fckprotectedatt="%20onclick%3D%22switchTag('tag8'%2C'content8')%3Bthis.blur()%3B%22"><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="/up_files/image/select/tab_selected_left_bk2.gif" _fcksavedurl="/up_files/image/select/tab_selected_left_bk2.gif" width="250" height="290" /></td>
<td width="30%" align="center"><img src="/up_files/image/select/tab_selected_right_bk2.gif" _fcksavedurl="/up_files/image/select/tab_selected_right_bk2.gif" width="15" height="290" /></td>
</tr>
</table>
</div>
<div id="content6" class="hidecontent">6.不是什么地方用ajax都合适的！</div>
<div id="content7" class="hidecontent">7.该刷新的地方还是要刷新！</div>
<div id="content8" class="hidecontent">8.刷新用cookie保存还是很不方便的！！！！！！！！ </div>
</div>
</div></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>

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

说明：
刷新问题还是没有解决；
如果要多加一个选项，就要更改I的数值；
如果一个页面出现多组选项卡则这种JS的写法不能用；
2.推荐！

HTML代码

</script>

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

HTML代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>test</TITLE>
<FCK:META http-equiv=Content-Type content="text/html; charset=gb2312" />
<STYLE type=text/css>BODY {
FONT-SIZE: 14px; COLOR: #000; FONT-FAMILY: 宋体
}
TD {
FONT-SIZE: 14px; COLOR: #000; FONT-FAMILY: 宋体
}
Select {
FONT-SIZE: 12px
}
INPUT {
FONT-SIZE: 12px
}
A:link {
COLOR: #3d362b
}
A:visited {
COLOR: #3d362b
}
A:hover {
COLOR: #f60
}
BODY #search {
CLEAR: both; WIDTH: 540px; HEIGHT: 50px
}
BODY #search #left {
FLOAT: left
}
BODY #search #searchleft {
PADDING-LEFT: 30px; FLOAT: left; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left
}
BODY #search #searchleft1 {
PADDING-LEFT: 30px; PADDING-TOP: 12px; HEIGHT: 35px; TEXT-ALIGN: left
}
FORM {
PADDING-RIGHT: 0px; DISPLAY: block; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY #newsearch {
WIDTH: 540px; HEIGHT: 30px
}
BODY #newsearchtop {
WIDTH: 540px; HEIGHT: 25px; TEXT-ALIGN: right
}
BODY #newsearchtop LI {
FONT-SIZE: 12px; FLOAT: left
}
.newsearchinsidew {	BORDER-TOP: #cccccc 1px solid; MARGIN-TOP: 2px; BORDER-LEFT: #ccc 1px solid; WIDTH: 70px; CURSOR: hand; LINE-HEIGHT: 21px; BORDER-BOTTOM: #cc3300 1px solid; HEIGHT: 23px; TEXT-ALIGN: center; TEXT-DECORATION: underline}
.newsearchinsider {	BORDER-RIGHT: #cc3300 1px solid; BORDER-TOP: #cc3300 1px solid; FONT-WEIGHT: bold; BORDER-LEFT: #cc3300 1px solid; WIDTH: 70px; COLOR: #ffffff; PADDING-TOP: 5px; HEIGHT: 25px; BACKGROUND-COLOR: #ff7300; TEXT-ALIGN: center}
.newsearchinsider A:visited {
COLOR: #ffffff; TEXT-DECORATION: none
}
.newsearchinsidew A:hover {
background-color:#CCCCCC;WIDTH: 69px; TEXT-ALIGN: center
}
BODY #newsearchbottom {
BORDER-RIGHT: #cc3300 1px solid; BORDER-LEFT: #cc3300 1px solid; BORDER-BOTTOM: #cc3300 1px solid; POSITION: relative; HEIGHT: 50px; BACKGROUND-COLOR: #ff7300
}
BODY #newsearchbottom #e1 {	Z-INDEX: 0; LEFT: 0px; VISIBILITY: visible; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e2 {	Z-INDEX: 0; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e3 {	Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e4 {	Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e5 {	Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e6 {	Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
BODY #newsearchbottom #e7 {	Z-INDEX: 2; LEFT: 0px; VISIBILITY: hidden; WIDTH: 538px; POSITION: absolute; TOP: 0px; HEIGHT: 30px}
UL {PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none}
</STYLE>
<SCRIPT>
function doClick(o){
	 o.className="newsearchinsider";
	 var j;
	 var id;
	 var e;
	 for(var i=1;i<=7;i++){
	   id ="v"+i;
	   j = document.getElementById(id);
	   e = document.getElementById("e"+i);
	   if(id != o.id){
	   	 j.className="newsearchinsidew";
	   	 e.style.visibility = "hidden";
	   }else{
			e.style.visibility = "visible";
	   }
	 }
	 
	var id = o.id+""; 
	var dd=id.substring(1,2);
	var curForm = document.getElementById("FormSearch"+dd);
	var inputv ;
	for(var i=1;i<=7;i++){
	var otherForm = document.getElementById("FormSearch"+i);
	}
	
}
function doOut(o){
 
}
      </SCRIPT>
</HEAD>
<BODY>
<br><br>
<DIV id=search>
<DIV id=newsearch>
<DIV id=newsearchtop>
<UL>
<LI><DIV class=newsearchinsider id=v1 onClick_fckprotectedatt="%20onClick%3D%22javascript%3AdoClick(this)%22"><A href="#" _fcksavedurl="#">供应信息</A></DIV></LI>
<LI><DIV class=newsearchinsidew id=v2 onClick_fckprotectedatt="%20onClick%3D%22javascript%3AdoClick(this)%22"><A href="#" _fcksavedurl="#">求购信息</A></DIV></LI>
<LI><DIV class=newsearchinsidew id=v3 onMouseOver_fckprotectedatt="%20onMouseOver%3D%22javascript%3AdoClick(this)%22"><A href="#" _fcksavedurl="#">产品目录</A></DIV></LI>
<LI><DIV class=newsearchinsidew id=v4 onMouseOver_fckprotectedatt="%20onMouseOver%3D%22javascript%3AdoClick(this)%22"><A href="#" _fcksavedurl="#">公司库</A></DIV></LI>
<LI><DIV class=newsearchinsidew id=v5 onMouseOver_fckprotectedatt="%20onMouseOver%3D%22javascript%3AdoClick(this)%22"><A href="#" _fcksavedurl="#">商业资讯</A></DIV></LI>
<LI><DIV class=newsearchinsidew id=v6 onMouseOver_fckprotectedatt="%20onMouseOver%3D%22javascript%3AdoClick(this)%22"><A href="#" _fcksavedurl="#">商人论坛</A></DIV></LI>
<LI><DIV class=newsearchinsidew id=v7 onMouseOver_fckprotectedatt="%20onMouseOver%3D%22javascript%3AdoClick(this)%22"><A href="#" _fcksavedurl="#">拍卖信息</A></DIV></LI>
</UL>
</DIV>
<DIV id=newsearchbottom>
<DIV id=e1><DIV id=left><DIV id=searchleft1>搜索 供应信息</DIV></DIV></DIV>
<DIV id=e2><DIV id=left><DIV id=searchleft1>请输入产品名关键字</DIV></DIV></DIV>
<DIV id=e3><DIV id=left><DIV id=searchleft1>请输入产品名关键字</DIV></DIV></DIV>
<DIV id=e4><DIV id=left><DIV id=searchleft1>请输入产品名或公司名关键字</DIV></DIV></DIV>
<DIV id=e5><DIV id=left><DIV id=searchleft1>请输入关键字</DIV></DIV></DIV>
<DIV id=e6><DIV id=left><DIV id=searchleft1>请输入关键字</DIV></DIV></DIV>
<DIV id=e7><DIV id=left><DIV id=searchleft1>请输入拍卖关键字</DIV></DIV></DIV></DIV></DIV>
</DIV><DIV></DIV>
</BODY></HTML>

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

说明：有问题
4.

HTML代码

[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>
<FCK: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_fckprotectedatt="%20onClick%3D%22ChangeFocus(this)%22">咖啡厅</td></tr>
<tr><td height="25" align="center" class="DivAround_blur" onClick_fckprotectedatt="%20onClick%3D%22ChangeFocus(this)%22">学校</td></tr>
<tr><td height="25" align="center" class="DivAround_blur" onClick_fckprotectedatt="%20onClick%3D%22ChangeFocus(this)%22">酒店</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" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml"  xml:lang="zh-CN" lang="zh-CN">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"  />
<title>163 Tab</title>
<style type="text/css">
<!--
/* 全局CSS定义 */
body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}

/* 2列 */
.divArea{margin:0 auto; width:750px;background:url("/up_files/image/select/bg.gif");}
.divArea .Col1{float:left; width:436px;}
.divArea .Col2{float:right; width:300px;}

/* 左边选项卡 */
.naTab{clear:both;border-bottom:1px #CCCCCC solid;}
.naTab .TabTitle{ height:22px; clear:both;overflow:hidden;}
.naTab .TabTitle ul{margin:0; padding:0;}
.naTab .TabTitle li{ list-style-type:none; padding:6px 0 2px;cursor:pointer;}
.naTab .TabTitle .active{ float:left;width:146px;background:url("/up_files/image/select/bg5_6_1.gif");}
.naTab .TabTitle .normal{ float:left;width:145px;background:url("/up_files/image/select/bg5_6_2.gif");}
.naTab .TabContent {padding:10px;}

/* 右边选项卡 */
.n4Tab{clear:both;border-bottom:1px #CCCCCC solid;}
.n4Tab .TabTitle{}
.n4Tab .TabTitle ul{margin:0; padding:0;}
.n4Tab .TabTitle li{float:left; width:60px; height:26px; list-style-type:none;cursor:pointer;}
.n4Tab .TabTitle li h6{font-size:12px; font-weight:normal; padding:8px 0 0;margin:0;}
.n4Tab .TabTitle .normal{background:url("/up_files/image/select/admenu_bg2.gif");}
.n4Tab .TabTitle .active{background:url("/up_files/image/select/admenu_bg1.gif");}
.n4Tab .TabContent {padding:10px;}

.none {display:none;}
-->
</style>
<script type="text/javascript">
function nTabs(tabObj,obj){
	var tabList = document.getElementById(tabObj).getElementsByTagName("li");
	for(i=0; i <tabList.length; i++)
	{
		if (tabList[i].id == obj.id)
		{
			document.getElementById(tabObj+"_Title"+i).className = "active"; 
    		document.getElementById(tabObj+"_Content"+i).style.display = "block";
		}else{
			document.getElementById(tabObj+"_Title"+i).className = "normal"; 
			document.getElementById(tabObj+"_Content"+i).style.display = "none";
		}
	} 
}
</script>
</head>
<body>
<br />

<div class="divArea">

<div class="Col1">

<div class="naTab" id="naTab" style="height:177px;">
<div class="TabTitle">
<ul>
<li id="naTab_Title0" onclick_fckprotectedatt="%20onclick%3D%22nTabs('naTab'%2Cthis)%3B%22" class="active"><a href="javascript:void(0);" _fcksavedurl="javascript:void(0);">娱乐</a></li>
<li id="naTab_Title1" onclick_fckprotectedatt="%20onclick%3D%22nTabs('naTab'%2Cthis)%3B%22" class="normal"><a href="javascript:void(0);" _fcksavedurl="javascript:void(0);">女人</a></li>
<li id="naTab_Title2" onclick_fckprotectedatt="%20onclick%3D%22nTabs('naTab'%2Cthis)%3B%22" class="normal"><a href="javascript:void(0);" _fcksavedurl="javascript:void(0);">汽车</a></li>
</ul>
</div>
<div class="TabContent">
<div id="naTab_Content0"> gg </div>
<div id="naTab_Content1" class="none">ddddddd gg </div>
<div id="naTab_Content2" class="none">rfffffffff</div>
</div>

</div>
</div>

<div class="Col2">

<div class="n4Tab" id="n4Tab" style="height:177px;">
<div class="TabTitle">
<ul>
<li id="n4Tab_Title0" onmouseover_fckprotectedatt="%20onmouseover%3D%22nTabs('n4Tab'%2Cthis)%3B%22" class="active"><h6><a href="javascript:void(0);" _fcksavedurl="javascript:void(0);">资讯</a></h6></li>
<li id="n4Tab_Title1" onmouseover_fckprotectedatt="%20onmouseover%3D%22nTabs('n4Tab'%2Cthis)%3B%22" class="normal"><h6><a href="javascript:void(0);" _fcksavedurl="javascript:void(0);">教育</a></h6></li>
<li id="n4Tab_Title2" onmouseover_fckprotectedatt="%20onmouseover%3D%22nTabs('n4Tab'%2Cthis)%3B%22" class="normal"><h6><a href="javascript:void(0);" _fcksavedurl="javascript:void(0);">房产</a></h6></li>
<li id="n4Tab_Title3" onmouseover_fckprotectedatt="%20onmouseover%3D%22nTabs('n4Tab'%2Cthis)%3B%22" class="normal"><h6><a href="javascript:void(0);" _fcksavedurl="javascript:void(0);">招商</a></h6></li>
<li id="n4Tab_Title4" onmouseover_fckprotectedatt="%20onmouseover%3D%22nTabs('n4Tab'%2Cthis)%3B%22" class="normal"><h6><a href="javascript:void(0);" _fcksavedurl="javascript:void(0);">拍卖</a></h6></li>
</ul>
</div>
<div class="TabContent">
<div id="n4Tab_Content0"> ah </div>
<div id="n4Tab_Content1" class="none"> sh </div>
<div id="n4Tab_Content2" class="none"> dh </div>
<div id="n4Tab_Content3"  class="none"> vh </div>
<div id="n4Tab_Content4" class="none"> nh </div>
</div>
</div>

</div>
</div>

</body>
</html>

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

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=utf-8"  />
<title>css选项卡(html组件)</title>
<style type="text/css">
div.card div{ background-color:#FF8000; float:left;  padding:1px; padding-bottom:0; clear:both; width:405px;}
div.card a{ color:black; font-size:14px; text-decoration:none;  float:left; width:100px; text-align:center; background-color:white; margin-right:1px;}
div.card div.home a.home{ font:normal normal bold 14px/1.5 宋体;}
div.card div.international a.international { font:normal normal bold 14px/1.5 宋体;}
div.card div.sport a.sport{ font:normal normal bold 14px/1.5 宋体;}
div.card div.finance a.finance{ font:normal normal bold 14px/1.5 宋体;}
div.card div.content{ background-color:white; border:1px solid #ff8000; height:100px;}
</style>
<script type="text/javascript">
var shq={}
shq.cmenu=function(e)
{
var e=window.event?window.event.srcElement:e.target;
        if(/a/i.test(e.tagName)){
        e.parentNode.className=e.className;
        e.parentNode.nextSibling.innerHTML=e.innerHTML;
        e.parentNode.nextSibling.style.cssText='border-top:none';
        e.blur();
        }
}
</script>
</head>
<body>
<div class="card">
<div onclick_fckprotectedatt="%20onclick%3D%22shq.cmenu(event)%22">
<a href="#" _fcksavedurl="#" class="home">国内</a>
<a href="#" _fcksavedurl="#" class="international">国际</a>
<a href="#" _fcksavedurl="#" class="sport">体育</a>
<a href="#" _fcksavedurl="#" class="finance">财经</a>
</div><div class="content"></div>
</div>
<div class="card">
<div onclick_fckprotectedatt="%20onclick%3D%22shq.cmenu(event)%22">
<a href="#" _fcksavedurl="#" class="home">国内</a>
<a href="#" _fcksavedurl="#" class="international">国际</a>
<a href="#" _fcksavedurl="#" class="sport">体育</a>
<a href="#" _fcksavedurl="#" class="finance">财经</a>
</div><div class="content"></div>
</div>
<div class="card">
<div onclick_fckprotectedatt="%20onclick%3D%22shq.cmenu(event)%22">
<a href="#" _fcksavedurl="#" class="home">国内</a>
<a href="#" _fcksavedurl="#" class="international">国际</a>
<a href="#" _fcksavedurl="#" class="sport">体育</a>
<a href="#" _fcksavedurl="#" class="finance">财经</a>
</div><div class="content"></div>
</div>
</body>
</html>

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

8其它
仿windows选项卡效果拾零

Tags:选项卡

选项卡特效大集合

相关文章