javascript 实现开关按钮

javascript 如何实现开关按钮--点击按钮，其状态显示打开，再次点击，状态显示关闭，请大家指教，谢谢！

解决方案 »

  1.   

    <input type="button" value="打开" onclick="if(this.value=='打开') this.value='关闭'; else this.value='打开'"/>
      

  2.   

    定义一个隐藏的div，然后对 点击 对象 定义click函数，显示或者隐藏该div
      

  3.   

    JQuery版例子<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script src="jquery-1.3.2.min.js" type="text/javascript" ></script>
    <script>
    $(function(){
    $("#a").toggle(function(){
    $(this).next().show();
    },function(){
    $(this).next().hide();
    });
    $("#b").toggle(function(){
    $(this).next().show();
    },function(){
    $(this).next().hide();
    });

    });
    </script>
    <style>
    #a1{ display:none}
    #b1{ display:none}

    </style></head>
    <body>
    <div id="a" >aaaaaaaaaaaaa</div>
    <div id="a1" >aaaaaaaaaaaa1</div>
    <div id="b" >bbbbbbbbbbbbb</div>
    <div id="b1" >bbbbbbbbbbbb1</div>
    </body>
    </html>
      

  4.   

    打开、关闭
    显示、隐藏
    display none block
      

  5.   

    LZ要的是不是这个效果<HTML>
     <HEAD>
     </HEAD> <BODY>
      <input type="button" value="打开" onclick="if(this.value=='打开') {this.value='关闭';document.getElementById('div1').style.display='none';} else {this.value='打开';document.getElementById('div1').style.display='block';}"/>
      <div id="div1" style="width:100px; height:100px; background-color:yellow;"></div>
     </BODY>
    </HTML>
      

  6.   

    <div id="f" style="width:100px;height:100px;background:blue;display:block;" ></div>
    <input type="submit" name="button" id="button" value="开关" onclick="c();" />
    <script type="text/javascript">
     function c(){
       document.getElementById("f").style.display = ((document.getElementById("f").style.display == "block") ? "none" : "block");
    }
    </script>