仿淘宝采用Js+Css打造超级漂亮的选项卡代码
代码简介：这是仿淘宝网的网页选项卡，CSS+JavaScript技术结合共同打造，超级漂亮，而且只用到了两个背景图片，不但很实用，而且本代码还有一个很值得学习的亮点，就是学习如何使用CSS控制背景图片的某个区域生效，这对你以后的WEB标准化之路帮助很大。
代码内容：
<!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>
<title>仿淘宝采用Js+Css打造超级漂亮的选项卡代码_网页代码站(www.webdm.cn)</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(http://www.webdm.cn/images/20090918/left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
display: block;
background: url(http://www.webdm.cn/images/20090918/right_bk2.gif) 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(http://www.webdm.cn/images/20090918/left_bk2.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
display: block;
background: url(http://www.webdm.cn/images/20090918/right_bk2.gif) 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(http://www.webdm.cn/images/20090918/left_bk2.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
display: block;
background: url(http://www.webdm.cn/images/20090918/right_bk2.gif) 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(http://www.webdm.cn/images/20090918/left_bk2.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
display: block;
background: url(http://www.webdm.cn/images/20090918/right_bk2.gif) 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(http://www.webdm.cn/images/20090918/left_bk2.gif) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
display: block;
background: url(http://www.webdm.cn/images/20090918/right_bk2.gif) 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(http://www.webdm.cn/images/20090918/left_bk2.gif) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
display: block;
background: url(http://www.webdm.cn/images/20090918/right_bk2.gif) no-repeat right -174px;
padding: 0 15px 0 15px;
}
#container #title .selectli1 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.webdm.cn/images/20090918/left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
display: block;
background: url(http://www.webdm.cn/images/20090918/right_bk2.gif) no-repeat right -87px;
padding: 0 15px 0 15px;
}
#container #title .selectli2 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.webdm.cn/images/20090918/left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
display: block;
background: url(http://www.webdm.cn/images/20090918/right_bk2.gif) no-repeat right 0px;
padding: 0 15px 0 15px;
}
#container #title .selectli3 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.webdm.cn/images/20090918/left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
display: block;
background: url(http://www.webdm.cn/images/20090918/right_bk2.gif) no-repeat right -58px;
padding: 0 15px 0 15px;
}
#container #title .selectli4 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.webdm.cn/images/20090918/left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
display: block;
background: url(http://www.webdm.cn/images/20090918/right_bk2.gif) no-repeat right -145px;
padding: 0 15px 0 15px;
}
#container #title .selectli5 {
text-decoration: none;
color: #ffffff;
display: block;
width: auto;
background: url(http://www.webdm.cn/images/20090918/left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
display: block;
background: url(http://www.webdm.cn/images/20090918/right_bk2.gif) 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)
{
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 class=selectli1 onclick="switchTag('tag1','content1');this.blur();" href="#"><SPAN class=selectspan1>网页代码站</SPAN></A> </LI>
<LI id=tag2><A onclick="switchTag('tag2','content2');this.blur();" href="#"><SPAN>下载中心</SPAN></A> </LI>
<LI id=tag3><A onclick="switchTag('tag3','content3');this.blur();" href="#"><SPAN>网页特效</SPAN></A> </LI>
<LI id=tag4><A onclick="switchTag('tag4','content4');this.blur();" href="#"><SPAN>会员注册与登录</SPAN></A> </LI>
<LI id=tag5><A onclick="switchTag('tag5','content5');this.blur();" href="#"><SPAN>所用图片</SPAN></A> </LI></UL></DIV>
<DIV class=content1 id=content>
<DIV id=content1>
<P>仿淘宝网站的导航效果。此方法有几个优点：</P>1、根据字数自适应项目长度</DIV>
<DIV class=hidecontent id=content2>2、WebDm.cn提供高质量代码下载。</DIV>
<DIV class=hidecontent id=content3>3、网页代码站网页特效，每一个都是精品，全心全意服务大家！</DIV>
<DIV class=hidecontent id=content4>4、背景图片只需两个就足够了，减少服务器负担</DIV>
<DIV class=hidecontent id=content5>5、这是本选项卡所使用到的两个图片，请保存：
<TABLE cellSpacing=2 cellPadding=0 width="58%" border=1>
<TBODY>
<TR>
<TD align=middle width="70%"><IMG height=290 src="http://www.webdm.cn/images/20090918/left_bk2.gif" width=250></TD>
<TD align=middle width="30%"><IMG height=290 src="http://www.webdm.cn/images/20090918/right_bk2.gif"
width=15></TD></TR></TBODY></TABLE></DIV></DIV></DIV>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/9fb1cfc2-6eb9-42ec-ab08-94d25f580dde.html
