<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="tab._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">
<title>tab页的制作</title>
<script language="javascript" type="text/javascript" >
function changeTab(n)
{
alert("test");
for(int i =1; i <= 4; i++)
{
if(i == n)
{
document.getElementById("tabc"+n).style.display="";
}
else
{
document.getElementById("tabc"+i).style.display="none":
}
}
}
function ss()
{
alert("hello");
}
</script>
<style type="text/css">
#tabpage
{
padding:0;
margin:0;
border:none;
width:500px;
font-size:14px;
font-family:宋体;
}
#tabbar
{
width:100%;
}
#tabbar ul
{
width:100%;
height:20px; /*高度比li的高度高一个即可*/
text-aligh:left;
padding:0;
margin:0;
border-bottom:1px solid #68BAFF;
}
#tabbar ul li
{
width:60px;
height:19px;
margin-bottom:0px;
padding-botton:0px;
margin-right:8px;
text-align:center;
float:left;
list-style-type:none;
background-color:#68BAFF;
}
#tabbar ul li a /*超级链接的样式*/
{
background-color:#68BAFF;
text-decoration:none;
display:block;
color:black;
}
#tabbar ul li a:hover /* 鼠标经过时的样式*/
{
background-color:white;
border-top:1px solid #68BAFF;
border-left:1px solid #68BAFF;
border-right:1px solid #68BAFF;
}
#tabc1,#tabc2,#tabc3,#tabc4
{
display:none;
border-left:1px solid #68BAFF;
border-right:1px solid #68BAFF;
border-bottom:1px solid #68BAFF;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="tabpage">
<div id="tabbar">
<ul>
<li id="tab1"><a href="#" onclick="return changeTab(1)">第一页</a></li>
<li id="tab2"><a href="#" onclick="return changeTab(2);" >第二页</a></li>
<li id="tab3"><a href="#" onclick="return changeTab(3);" >第三页</a></li>
<li id="tab4"><a href="#" onclick="return changeTab(4);" >第四页</a></li>
</ul>
</div>
<div id="tabContent">
<div id="tabc1" style="display:block;">
第一页第一节<br/>
第一页第一节<br/>
第一页第一节<br/>
</div>
<div id="tabc2">
第二页第二节<br />
第二页第二节<br />
第二页第二节<br />
第二页第二节<br />
</div>
<div id="tabc3" >
第三页第三节<br />
第三页第三节<br />
第三页第三节<br />
第三页第三节<br />
</div>
<div id="tabc4" >
第四页第四节<br />
第四页第四节<br />
第四页第四节<br />
第四页第四节<br />
</div>
</div>
</div>
</form>
</body>
</html>
为什么不能调用changeTab()函数,点击没有反应,谢谢
<head runat="server">
<title>tab页的制作</title>
<script language="javascript" type="text/javascript" >
function changeTab(n)
{
alert("test");
for(int i =1; i <= 4; i++)
{
if(i == n)
{
document.getElementById("tabc"+n).style.display="";
}
else
{
document.getElementById("tabc"+i).style.display="none":
}
}
}
function ss()
{
alert("hello");
}
</script>
<style type="text/css">
#tabpage
{
padding:0;
margin:0;
border:none;
width:500px;
font-size:14px;
font-family:宋体;
}
#tabbar
{
width:100%;
}
#tabbar ul
{
width:100%;
height:20px; /*高度比li的高度高一个即可*/
text-aligh:left;
padding:0;
margin:0;
border-bottom:1px solid #68BAFF;
}
#tabbar ul li
{
width:60px;
height:19px;
margin-bottom:0px;
padding-botton:0px;
margin-right:8px;
text-align:center;
float:left;
list-style-type:none;
background-color:#68BAFF;
}
#tabbar ul li a /*超级链接的样式*/
{
background-color:#68BAFF;
text-decoration:none;
display:block;
color:black;
}
#tabbar ul li a:hover /* 鼠标经过时的样式*/
{
background-color:white;
border-top:1px solid #68BAFF;
border-left:1px solid #68BAFF;
border-right:1px solid #68BAFF;
}
#tabc1,#tabc2,#tabc3,#tabc4
{
display:none;
border-left:1px solid #68BAFF;
border-right:1px solid #68BAFF;
border-bottom:1px solid #68BAFF;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="tabpage">
<div id="tabbar">
<ul>
<li id="tab1"><a href="#" onclick="return changeTab(1)">第一页</a></li>
<li id="tab2"><a href="#" onclick="return changeTab(2);" >第二页</a></li>
<li id="tab3"><a href="#" onclick="return changeTab(3);" >第三页</a></li>
<li id="tab4"><a href="#" onclick="return changeTab(4);" >第四页</a></li>
</ul>
</div>
<div id="tabContent">
<div id="tabc1" style="display:block;">
第一页第一节<br/>
第一页第一节<br/>
第一页第一节<br/>
</div>
<div id="tabc2">
第二页第二节<br />
第二页第二节<br />
第二页第二节<br />
第二页第二节<br />
</div>
<div id="tabc3" >
第三页第三节<br />
第三页第三节<br />
第三页第三节<br />
第三页第三节<br />
</div>
<div id="tabc4" >
第四页第四节<br />
第四页第四节<br />
第四页第四节<br />
第四页第四节<br />
</div>
</div>
</div>
</form>
</body>
</html>
为什么不能调用changeTab()函数,点击没有反应,谢谢
<li id="tab1"> <a href="#" onclick="return changeTab(1)">第一页 </a> </li>
<li id="tab2"> <a href="#" onclick="return changeTab(2);" >第二页 </a> </li>
<li id="tab3"> <a href="#" onclick="return changeTab(3);" >第三页 </a> </li>
<li id="tab4"> <a href="#" onclick="return changeTab(4);" >第四页 </a> </li>
......
改成
......
<li id="tab1"> <a href="#" onclick="changeTab(1)">第一页 </a> </li>
<li id="tab2"> <a href="#" onclick="changeTab(2)" >第二页 </a> </li>
<li id="tab3"> <a href="#" onclick="changeTab(3)" >第三页 </a> </li>
<li id="tab4"> <a href="#" onclick="changeTab(4)" >第四页 </a> </li>
....
写成
document.getElementById("tabc"+n).style.display="block";