<%@ 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()函数,点击没有反应,谢谢

解决方案 »

  1.   

    ......
    <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> 
    ....
      

  2.   

    最好把document.getElementById("tabc"+n).style.display="";   
    写成
    document.getElementById("tabc"+n).style.display="block";