我們?cè)谥谱骶W(wǎng)頁(yè)時(shí)，有時(shí)會(huì)碰到這樣的情況：根據(jù)用戶的選擇，顯示不同的內(nèi)容。比如，制作一個(gè)登錄網(wǎng)頁(yè)，上面有兩個(gè)表格，一個(gè)給新用戶注冊(cè)用，一個(gè)供老用戶登錄用。我們想在頁(yè)面上放兩個(gè)radiobutton，根據(jù)用戶的選擇，來(lái)顯示注冊(cè)表格或登錄表格。這些操作是在同一個(gè)頁(yè)面中完成的，不需要跳轉(zhuǎn)到其它頁(yè)面或刷新當(dāng)前頁(yè)面。下面我們就來(lái)講述如何實(shí)現(xiàn)這樣的功能。
    打開(kāi)Dreamweaver，添加兩個(gè)radiobutton，名稱分別為radiobutton1和radiobutton2.radiobutton1供新用戶注冊(cè)點(diǎn)擊，radiobutton2供老用戶登錄點(diǎn)擊。再添加一個(gè)表格，用來(lái)顯示新用戶的注冊(cè)登記區(qū)域。在表格中插入需要的相關(guān)元素、文字；再插入一個(gè)表格，用來(lái)顯示老用戶登錄區(qū)域，同樣在表格內(nèi)插入相關(guān)內(nèi)容。這樣，我們就簡(jiǎn)單地設(shè)計(jì)好了界面。
    接著，我們就開(kāi)始編輯相關(guān)的代碼。選中第一個(gè)表格，在HTML編輯窗口中對(duì)其進(jìn)行修改，在表格 　　〈table id=“newuser” style=“display：none” border=“0” cellspacing=“0” cellpadding=“0”＞同樣的方法對(duì)第二個(gè)表格進(jìn)行修改，ID值為“olduser”。這是我們按下F12預(yù)覽，在瀏覽器中看到的只是兩個(gè)radiobutton，表格是不可視的。
    完成以上編輯后，開(kāi)始編寫radiobutton的代碼。選中radiobutton1為其添加一個(gè)onclick的事件響應(yīng)，代碼如下：
    代碼含義是點(diǎn)擊radiobutton1時(shí)，設(shè)置表格newuser的display屬性為空，即可視，表格olduserdisplay屬性為none不可視。
    同樣編輯radiobutton2代碼，它的onclick事件響應(yīng)和radiobutton1恰恰相反，代碼如下：
    。
    完成以上步驟后，就搞定了這個(gè)頁(yè)面的制作。F12預(yù)覽，瀏覽器中，我們點(diǎn)擊radiobutton1就會(huì)顯示新用戶注冊(cè)界面；再點(diǎn)擊radiobutton新用戶注冊(cè)界面不可視，老用戶登錄界面顯示。
    通過(guò)很簡(jiǎn)單的代碼編輯，就可以實(shí)現(xiàn)這個(gè)非常實(shí)用的功能。雖然我們用層也可以實(shí)現(xiàn)這樣的效果，但是層在網(wǎng)頁(yè)中精確定位遠(yuǎn)沒(méi)有表格方便，不便于網(wǎng)頁(yè)的整體布局設(shè)計(jì)。