- 相關(guān)推薦
如何用DW8實(shí)現(xiàn)網(wǎng)頁(yè)區(qū)域內(nèi)選擇顯示
我們?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è)面。下面是小編為大家?guī)?lái)的關(guān)于如何用DW8實(shí)現(xiàn)網(wǎng)頁(yè)區(qū)域內(nèi)選擇顯示的知識(shí)，歡迎閱讀。
如何用DW8實(shí)現(xiàn)網(wǎng)頁(yè)區(qū)域內(nèi)選擇顯示
打開(kāi)Dreamweaver8，添加兩個(gè)單選按鈕，名稱分別為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)行修改，在表格
�。紅able id="newuser" style="display:none" border="0" cellspacing="0" cellpadding="0"＞
同樣的`方法對(duì)第二個(gè)表格進(jìn)行修改，ID值為“olduser”。這是我們按下F12預(yù)覽，在瀏覽器中看到的只是兩個(gè)radiobutton，表格是不可視的。
完成以上編輯后，開(kāi)始編寫(xiě)radiobutton的代碼。選中radiobutton1為其添加一個(gè)onclick的事件響應(yīng)，代碼如下：
�。糹nput type="radio" name="radiobutton" value="radiobutton"onclick="newuser.style.display='';olduser.style.display='none'"＞
代碼含義是點(diǎn)擊radiobutton1時(shí)，設(shè)置表格newuser的display屬性為空，即可視，表格olduserdisplay屬性為none不可視。
同樣編輯radiobutton2代碼，它的onclick事件響應(yīng)和radiobutton1恰恰相反，代碼如下：
＜input type="radio" name="radiobutton" value="radiobutton" onclick="olduser.style.display='';newuser.style.display='none'"＞
完成以上步驟后，就搞定了這個(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ì)。
【如何用DW8實(shí)現(xiàn)網(wǎng)頁(yè)區(qū)域內(nèi)選擇顯示】相關(guān)文章：
如何用css進(jìn)行網(wǎng)頁(yè)布局07-06
如何用Dreamweaver設(shè)計(jì)網(wǎng)頁(yè)10-25
如何用Dreamweaver制作網(wǎng)頁(yè)模板08-15
如何用Dreamweaver實(shí)現(xiàn)網(wǎng)站批量更新06-09
Java中如何實(shí)現(xiàn)顯示動(dòng)態(tài)的時(shí)間09-28