Do not jump or refresh to implement page area selection display

Refresh | page | show

When we are making Web pages, we sometimes encounter situations where we can display different content according to the user's choice. For example, to create a login page, there are two forms, one for the new user registration, one for the old user login. We want to put two RadioButton on the page, depending on the user's choice, to display the registration form or login form. These operations are done on the same page without the need to jump to another page or refresh the current page. Let's talk about how to implement this functionality here.

Open Dreamweaver and add two RadioButton, named RadioButton1 and RadioButton2, respectively. RadioButton1 for new users to register clicks, RadioButton2 for the old user login click. Add a table to display the registration area for the new user. Insert the relevant elements and text you want in the table, and then insert a table to display the old user login area and insert the relevant content in the table as well. In this way, we simply designed the interface.

Next, we'll start editing the relevant code. Select the first table and modify it in the HTML editing window, in the table

〈table id= "NewUser" style= "Display:none" border= "0" cellspacing= "0" cellpadding= "0"

The same method modifies the second table with the ID value "Olduser". This is when we press F12 Preview, see in the browser is only two RadioButton, the table is not visual.

When you have finished editing the above, start writing RadioButton code. Select RadioButton1 to add a onclick event response for it, as follows:

〈input type= "Radio" name= "RadioButton" value= "RadioButton" >

The meaning of the code is that when you click RadioButton1, the Display property that sets the table NewUser is empty, that is, visual, the Table Olduserdisplay property is None.

Also edits the RadioButton2 code, its OnClick event response is the opposite of RadioButton1, and the code is as follows:

〈input type= "Radio" name= " RadioButton "Value=" "RadioButton".

After completing the above steps, you are finished making this page. F12 Preview, the browser, we click on the RadioButton1 will show the new user registration interface, and then click RadioButton New User Registration interface can not be seen, the old user login interface display.

Enables this very useful feature through very simple code editing. Although we can use the layer to achieve this effect, but the level of accurate positioning in the Web page is far from convenient form, not easy to the overall layout of the Web page design.