Home > Developer > Web Develop
Transferred from: http://www.cnblogs.com/linjiqin/p/3148228.html
This case implements a switch-button effect similar to the.
The page has a drop-down list, text boxes, buttons, and other form elements, to achieve the following effect:
1. When the page loads, the text box is hidden, the drop-down list is displayed, and the button value changes to "Show text box".
2. When the "Show text Box" button is clicked, the text box appears, the drop-down list is hidden, and the button value changes to "Show drop-down list".
3. When you click the "Show drop down list" button, the text box is hidden, the drop-down list is displayed, and the button value changes to "Show text box".
<!DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en"><HTML> <Head> <title>Hide_or_show.html</title> <Metahttp-equiv= "keywords"content= "Keyword1,keyword2,keyword3"> <Metahttp-equiv= "description"content= "This is my page"> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8"> <Scripttype= "Text/javascript"src= "Js/jquery-1.3.1.js"></Script> <Scripttype= "Text/javascript"> varI=0; //Global variables to control button values functionisshow () {//when the button is clicked, it is initialized to the default value //Sets the value of Select to NULL for an item selected $("#city option[value= ' 0 ']"). attr ("selected", true); $("#username"). Val (""); $("#show_text"). Toggle ("Fast", function() {i++; if(i%2==0){ //even time $("#btnShow"). Val ("Show text Box"); }Else{ $("#btnShow"). Val ("Show drop-down list"); } }); $("#show_select"). Toggle (); } //Hide the text box when the page loads functionHide () {$ ("#show_text"). Hide (); } </Script> </Head> <Bodyonload= "Hide ()"> <spanID= "Show_select"> <SelectID= "City"> <optionvalue= "0">Please select ...</option> <optionvalue= "1">Beijing</option> <optionvalue= "2">Shanghai</option> </Select> </span> <spanID= "Show_text"style= "Display:inline; "> <inputID= "username"size= " the" /> </span> <Div> <inputtype= "button"ID= "Btnshow"onclick= "Isshow ()"value= "Show text box" /> </Div> </Body></HTML>
Using jquery to achieve the effect of a switch-like button
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
