标签页效果

 有两个按钮，点击这两个按钮分别显示不相同的层

解决方案 »

  1.   

    记得，显示和隐藏的两个层一定要放在表格的一个td里<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    </head>
    <body>
    <input type="button" value="红色" onClick="dis('red','green')"><input type="button" value="绿色" onClick="dis('green','red')">
      <table>
      <tr><td><div id="red" style="background-color:red; width:200px; height:200px; display:block;"></div><div id="green" style="background-color:green; width:200px; height:200px; display:none"></div></td></tr>
      </table>
    </body>
    </html> 
    <script language="javascript">
    function dis(show,hidden)
    {
    document.getElementById(show).style.display="block";
    document.getElementById(hidden).style.display="none";
    }
    </script>
      

  2.   

    用jQuery简单实现 
    <!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>
        <title>无标题页</title>
        <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
        <script type ="text/javascript" >
        $ (function()
        {
        $("#Button1").bind("click",function (){$("#div1").show();$("#div2").hide();});
        $("#Button2").bind("click",function (){$("#div1").hide();$("#div2").show();});
        })
        </script>
    </head>
    <body>
        <input id="Button1" type="button" value="button1" runat ="server" />
        <input id="Button2" type="button" value="button2" runat ="server"  />
        <div id ="div1">
         div1
        </div>
        <div id ="div2">
        div2
        </div>
    </body></html>
      

  3.   

    jquery版本<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <script src="js/jquery-1.3.2.min.js"></script>
    </head>
    <body>
    <input id="btn" type="button" value="变换">
      <table>
      <tr><td><div id="red" style="background-color:red; width:200px; height:200px; display:block;"></div><div id="green" style="background-color:green; width:200px; height:200px; display:none"></div></td></tr>
      </table>
    </body>
    </html> 
    <script language="javascript">
    $(function()
    {
    $('#btn').click(function()
    {
    $('#red,#green').toggle("slow");
    });
    });
    </script>
      

  4.   


    本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/ws_hgo/archive/2009/11/02/4756737.aspx
    <!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>   
        <title>jquery事件</title>   
        <mce:style type="text/css"><!--   
        .head   
        { width:150px;   
          color:Gray;   
        }   
        .content   
        {   
        width:150px;   
        background-color:Gray;   
        }   
           
    --></mce:style><style type="text/css" mce_bogus="1">    .head   
        { width:150px;   
          color:Gray;   
        }   
        .content   
        {   
        width:150px;   
        background-color:Gray;   
        }   
        </style>   
         <mce:script src="../jquery/jquery-1.3.2.min.js" mce_src="jquery/jquery-1.3.2.min.js" type="text/javascript"></mce:script>   
         <mce:script type="text/javascript"><!--   
         $(function(){   
    $(function(){   
    //页面加载的时候就隐藏content   
    $("div.content").hide();   
    });   
    //bind方法为head绑定mouseover,mouseout方法   
     $("#panel h5.head").bind("mouseover",function(){   
           $(this).next("div.content").show();   
     });   
     $("#panel h5.head").bind("mouseout",function(){   
           $(this).next("div.content").hide();   
     })   
         })   
            
    // --></mce:script>   
    </head>   
    <body>   
    <div id="panel">   
    <h5 class="head">jquery简介介绍！</h5>   
    <div class="content">   
    jquery是集prototype之后,又一款轻量级javascript框架.   
    其简洁的语法,跨平台!深受广大程序员的喜爱~！   
    </div>   
    </div>   
    </body>   
    </html>