使用jQuery实现类似开关按钮的效果

最新推荐文章于 2023-05-17 17:45:53 发布

weixin_34310785

最新推荐文章于 2023-05-17 17:45:53 发布

阅读量472

点赞数

文章标签： javascript ViewUI

本案例实现类似开关按钮效果。

页面有下拉列表、文本框、按钮等表单元素，大致实现如下效果：
1、页面一加载时，文本框隐藏，下拉列表显示，按钮值变为“显示文本框”。
2、点击“显示文本框”按钮时，文本框显示，下拉列表隐藏，按钮值变为“显示下拉列表”。
3、点击“显示下拉列表”按钮时，文本框隐藏，下拉列表显示，按钮值变为“显示文本框”。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>hide_or_show.html</title>
 
  <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  <meta http-equiv="description" content="this is my page">
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 
  <script type="text/javascript" src="js/jquery-1.3.1.js"></script>
  <script type="text/javascript">
  var i=0; //全局变量，用来控制按钮值
   
  function isShow(){
      //在点击按钮时，初始化为默认值
   //设置select的value值为空的项选中
   $("#city option[value='0']").attr("selected", true);   
   $("#username").val("");
    
   $("#show_text").toggle("fast", function(){
       i++;
       if(i%2==0){ //偶数时
        $("#btnShow").val("显示文本框");
       }else{
        $("#btnShow").val("显示下拉列表");
       }
   });
   $("#show_select").toggle();
  }
   
  //页面加载时，把文本框隐藏起来
  function hide(){
     $("#show_text").hide();
  }
  </script>
 </head>
 
 <body onload="hide()">
  <span id="show_select">
   <select id="city">
      <option value="0">请选择...</option>
      <option value="1">北京</option>
      <option value="2">上海</option>
   </select>
  </span>
   
  <span id="show_text" style="display: inline; "> 
   <input id="username" size="20" /> 
  </span>
   
  <div>
   <input type="button" id="btnShow" onclick="isShow()" value="显示文本框" />
        </div>
 </body>
</html>