js选项卡式导航特效代码

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>选项卡式导航</title>

<!?

* {

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.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_left_bk2.gif) no-repeat left -29px;

}

#container #title a span{

display: block;

background: url(http://www.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_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.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_left_bk2.gif) no-repeat left -87px;

}

#container #title #tag1 a:hover span{

display: block;

background: url(http://www.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_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.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_left_bk2.gif) no-repeat left 0px;

}

#container #title #tag2 a:hover span{

display: block;

background: url(http://www.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_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.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_left_bk2.gif) no-repeat left -58px;

}

#container #title #tag3 a:hover span{

display: block;

background: url(http://www.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_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.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_left_bk2.gif) no-repeat left -145px;

}

#container #title #tag4 a:hover span{

display: block;

background: url(http://www.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_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.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_left_bk2.gif) no-repeat left -174px;

}

#container #title #tag5 a:hover span{

display: block;

background: url(http://www.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_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.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_left_bk2.gif) no-repeat left -87px;

}

#container #title a .selectspan1 {

display: block;

background: url(http://www.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_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.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_left_bk2.gif) no-repeat left 0px;

}

#container #title a .selectspan2 {

display: block;

background: url(http://www.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_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.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_left_bk2.gif) no-repeat left -58px;

}

#container #title a .selectspan3 {

display: block;

background: url(http://www.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_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.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_left_bk2.gif) no-repeat left -145px;

}

#container #title a .selectspan4 {

display: block;

background: url(http://www.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_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.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_left_bk2.gif) no-repeat left -174px;

}

#container #title a .selectspan5 {

display: block;

background: url(http://www.zzzyk.com/js_a/javascript-dh/jsfile/imagesa37/tab_selected_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>

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>

<ul>

<li id="tag1"><span

class="selectspan1">首页</span></li>

<li id="tag4"><span>会员注册与登录</span></li>

</ul>

</div>

<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、这是使用到的两个图片：

<tr>

</tr>

</table>

</div>

</body>

</html></td>
	  </tr>
	</table>

提示：您可以先修改部分代码再运行

补充：网页特效,导航菜单