Using DW8 to implement the selection display in the page area

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 Dreamweaver8 and add two radio buttons, 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

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 an onclick event response for it, the code is as follows:

The meaning of the code is to click RadioButton1, set the table NewUser display property is empty, that is, visual, table Olduserdisplay property is None.

Also edit RadioButton2 code, its OnClick event response and radiobutton1 the contrary, the code is as follows:

After the completion of the above steps, we have finished the production of 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.

This very useful functionality can be achieved 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.