div切换

帮忙看看：<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>标题</title>
</head><style type="text/css">
body{ font:12px/22px "宋体"; color:#000;}
class1{ background:red;}
class2{ background:blue;}
#all{ width:200px;}
.all ul{list-style:none;}
.all ul li{ float:left; display:block; width:100px;}
</style>
<body><script language="javascript">
 function Tab(j){
  for(i=1,i<3 i++)
  {
  document.getElementById(tabi).style.display="block";
  document.getElementById(tabi).className="classi";
 
  }
 
 }
 
</script>
<div class="all">
<ul>
<li><a href="#" onclick="Tab(1)">标签</a>1</li>
<li><a href="#"onclick="Tab(2)">标签</a>2</li>
</ul>
  <div id="tab1">1111</div>
  <div id="tab2" style="display:none">2222222222</div>
</div>
</body>
</html>

解决方案 »

  1.   

    <script language="javascript"> 
    function Tab(j){ 
      for(var i=1;i<3;i++) 
      { 
      document.getElementById(tabi).style.display="block"; 
      document.getElementById(tabi).className="classi";   } } </script> 
      

  2.   

    function Tab(i){ 
        document.getElementById("tab"+i).style.display=""; 
      document.getElementById(("tab"+i).className="class"+i; 
    document.getElementById("tab"+(3-i)).style.display="none"; 
      document.getElementById(("tab"+(3-i)).className="class"+(3-i); } 
      

  3.   


    <script language="javascript"> 
    function Tab(j){ 
      for(i=1,i <3 i++) 
      { 
      if(i==j)continue;
      document.getElementById("tab"+i).style.display="block"; 
      document.getElementById("tab"+i).className="class"+i; 
      } } </script> 
      

  4.   

    <script language="javascript"> 
    function Tab(j){ 
      for(i=1,i <3 i++){ 
    if(i==j){
      document.getElementById("tab"+i).style.display="block"; 
      document.getElementById("tab"+i).className="class"+i; 
    }
    else{
      document.getElementById("tab"+i).style.display="none"; 
      document.getElementById("tab"+i).className="class"+i;
    }}} 
    </script> 
      

  5.   

    <!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>标题 </title> 
    </head> <style type="text/css"> 
    body{ font:12px/22px "宋体"; color:#000;} 
    class1{ background:red;} 
    class2{ background:blue;} 
    #all{ width:200px;} 
    .all ul{list-style:none;} 
    .all ul li{ float:left; display:block; width:100px;} 
    </style> 
    <body> <script language="javascript"> 
    function Tabs(i){ 
        document.getElementById("tab"+i).style.display=""; 
      document.getElementById("tab"+i).className="class"+i; 
    document.getElementById("tab"+(3-i)).style.display="none"; 
      document.getElementById("tab"+(3-i)).className="class"+(3-i); 
    } 
    </script> 
    <div class="all"> 
    <ul> 
    <li> <a href="javascript:Tabs(1)">标签 </a>1 </li> 
    <li> <a href="javascript:Tabs(2)">标签 </a>2 </li> 
    </ul> 
      <div id="tab1">1111 </div> 
      <div id="tab2" style="display:none">2222222222 </div> 
    </div> 
    </body> 
    </html> 
      

  6.   

    非常感谢大家！  chinmo  这种方法请附上html看一下。谢谢了
      

  7.   

    <!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> 
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
    <title>标题 </title> 
    </head> <style type="text/css"> 
    body{ font:12px/22px "宋体"; color:#000;} 
    .class1{ background:red;} 
    .class2{ background:blue;} 
    #all{ width:200px;} 
    .all ul{list-style:none;} 
    .all ul li{ float:left; display:block; width:100px;} 
    </style> 
    <body> <script language="javascript"> 
    function Tab(j)
    { 
      for(i=1; i <3; i++) 
      { 
       document.getElementById("tab" + i).className="class" + i; 
       if( i==j )  
       document.getElementById( "tab" + i).style.display="block"; 
       else
           document.getElementById( "tab" + i).style.display="none"; 
      
      } } </script> 
    <div class="all"> 
    <ul> 
    <li> <a href="#" onclick="Tab(1)">标签 </a>1 </li> 
    <li> <a href="#"onclick="Tab(2)">标签 </a>2 </li> 
    </ul>  <br>
    <div id="tab1">1111 </div> 
    <div id="tab2" style="display:none">2222222222 </div> 

    </div> 
    </body> 
    </html> 
      

  8.   

    因为复制你的代码，你代码本身就有错误改了几个错误的地方：<script language="javascript"> 
    function Tabs(j){ 
    for(i=1;i<3;i++){ 
    if(i==j){
      document.getElementById("tab"+i).style.display="block"; 
      document.getElementById("tab"+i).className="class"+i; 
    }
    else{
      document.getElementById("tab"+i).style.display="none"; 
      document.getElementById("tab"+i).className="class"+i;
    }}} 
    </script>
      

  9.   

    给你指明你里面的几个错误 <style type="text/css"> 
    body{ font:12px/22px "宋体"; color:#000;} 
    .class1{ background:red;} /*漏了.*/
    .class2{ background:blue;} /*漏了.*/
    #all{ width:200px;} 
    .all ul{list-style:none;} 
    .all ul li{ float:left; display:block; width:100px;} 
    </style> 
    <body> <script language="javascript"> 
    function Tab(j){ 
      for(i=1,i <3 i++) //这里错了，应该是for(i=1;i <3;i++) 
      { 
      document.getElementById(tabi).style.display="block"; 
      document.getElementById(tabi).className="classi";   } } </script> 
    <div class="all"> 
    <ul> 
    <li> <a href="#" onclick="Tab(1)">标签 </a>1 </li>
    <li> <a href="#"onclick="Tab(2)">标签 </a>2 </li> 
    </ul>