完整代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 runat="server">
<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(tab_selected_left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
display: block;
background: url(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>
<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;
}
}
function Button1_onclick() {
document.body.style.backgroundColor="Blue";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<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 >下载中心</span></a></li>
<li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();" ><span >产品介绍</span></a></li>
<li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
<li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li>
</ul>
</div>
<div id="content" class="content1">
<div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点:</p>1、根据字数自适应项目长度</div>
<input id="Button1" type="button" value="button" language="javascript" onclick="return Button1_onclick()" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" /><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、这是使用到的两个图片:<br />
<table width="58%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td align="center" style="width: 70%"><img src="tab_selected_left_bk2.gif" width="250" height="290" /></td>
<td width="30%" align="center"><img src="tab_selected_right_bk2.gif" width="15" height="290" /></td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>问题:服务器上刷新怎样才能使tabcontrol保持不变,不跳会初始状态。
主要是class="selectli1" class="selectspan1" class="hidecontent 起作用
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!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 runat="server">
<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(tab_selected_left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
display: block;
background: url(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>
<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;
}
}
function Button1_onclick() {
document.body.style.backgroundColor="Blue";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<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 >下载中心</span></a></li>
<li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();" ><span >产品介绍</span></a></li>
<li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>会员注册与登录</span></a></li>
<li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>联系我们</span></a></li>
</ul>
</div>
<div id="content" class="content1">
<div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点:</p>1、根据字数自适应项目长度</div>
<input id="Button1" type="button" value="button" language="javascript" onclick="return Button1_onclick()" />
<asp:Button ID="Button2" runat="server" OnClick="Button2_Click" Text="Button" /><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、这是使用到的两个图片:<br />
<table width="58%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td align="center" style="width: 70%"><img src="tab_selected_left_bk2.gif" width="250" height="290" /></td>
<td width="30%" align="center"><img src="tab_selected_right_bk2.gif" width="15" height="290" /></td>
</tr>
</table>
</div>
</div>
</div>
</form>
</body>
</html>问题:服务器上刷新怎样才能使tabcontrol保持不变,不跳会初始状态。
主要是class="selectli1" class="selectspan1" class="hidecontent 起作用
<head id="Head1" runat="server">
<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(tab_selected_left_bk2.gif) no-repeat left -29px;
}
#container #title a span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title #tag1 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title #tag2 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title #tag3 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title #tag4 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title #tag5 a:hover span{
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -87px;
}
#container #title a .selectspan1 {
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left 0px;
}
#container #title a .selectspan2 {
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -58px;
}
#container #title a .selectspan3 {
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -145px;
}
#container #title a .selectspan4 {
display: block;
background: url(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(tab_selected_left_bk2.gif) no-repeat left -174px;
}
#container #title a .selectspan5 {
display: block;
background: url(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>
<script language="javascript">
function switchTag(tag,content)
{
document.getElementById("hidCurValue").value = 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;
}
}
function Button1_onclick() {
document.body.style.backgroundColor="Blue";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<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 >下载中心 </span> </a> </li>
<li id="tag3"> <a href="#" onclick="switchTag('tag3','content3');this.blur();" > <span >产品介绍 </span> </a> </li>
<li id="tag4"> <a href="#" onclick="switchTag('tag4','content4');this.blur();"> <span>会员注册与登录 </span> </a> </li>
<li id="tag5"> <a href="#" onclick="switchTag('tag5','content5');this.blur();"> <span>联系我们 </span> </a> </li>
</ul>
</div>
<div id="content" class="content1">
<div id="content1"> <p>仿淘宝网站的导航效果。此方法有几个优点: </p>1、根据字数自适应项目长度 </div>
<input id="Button1" type="button" value="button" language="javascript" onclick="return Button1_onclick()" />
<asp:Button ID="Button2" runat="server" Text="Button" /> <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、这是使用到的两个图片: <br />
<table width="58%" border="1" cellspacing="2" cellpadding="0">
<tr>
<td align="center" style="width: 70%"> <img src="tab_selected_left_bk2.gif" width="250" height="290" /> </td>
<td width="30%" align="center"> <img src="tab_selected_right_bk2.gif" width="15" height="290" /> </td>
</tr>
</table>
</div>
</div>
</div>
<asp:HiddenField ID="hidCurValue" runat="server" />
</form>
</body>
</html> <script>
init()
function init ()
{
var ary = document.getElementById("hidCurValue").value.split(",");
if(ary.length == 2)
{
switchTag(ary[0],ary[1]);
}
}
</script>