DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver入門 >> 不要跳轉或刷新實現網頁區域選擇顯示
不要跳轉或刷新實現網頁區域選擇顯示
編輯:Dreamweaver入門     

文章來源:清風網絡 http://www.vipcn.com

  我們在制作網頁時,有時會遇到這樣的情況:根據用戶的選擇,顯示不同的內容。比如,制作一個登錄網頁,上面有兩個表格,一個給新用戶注冊用,一個供老用戶登錄用。我們想在頁面上放兩個radiobutton,根據用戶的選擇,來顯示注冊表格或登錄表格。這些操作是在同一個頁面中完成的,不需要跳轉到其它頁面或刷新當前頁面。下面我們就來講述如何實現這樣的功能。

  打開Dreamweaver,添加兩個radiobutton,名稱分別為radiobutton1和radiobutton2。radiobutton1供新用戶注冊點擊,radiobutton2供老用戶登錄點擊。再添加一個表格,用來顯示新用戶的注冊登記區域。在表格中插入需要的相關元素、文字;再插入一個表格,用來顯示老用戶登錄區域,同樣在表格內插入相關內容。這樣,我們就簡單地設計好了界面。

  接著,我們就開始編輯相關的代碼。選中第一個表格,在HTML編輯窗口中對其進行修改,在表格

  <table id="newuser" style="display:none" border="0" cellspacing="0" cellpadding="0">

  同樣的方法對第二個表格進行修改,ID值為“olduser”。這是我們按下F12預覽,在浏覽器中看到的只是兩個radiobutton,表格是不可視的。

  完成以上編輯後,開始編寫radiobutton的代碼。選中radiobutton1為其添加一個onclick的事件響應,代碼如下:

  <input type="radio" name="radiobutton" value="radiobutton"onclick="newuser.style.display='';olduser.style.display='none'">

  代碼含義是點擊radiobutton1時,設置表格newuser的display屬性為空,即可視,表格olduserdisplay屬性為none不可視。

  同樣編輯radiobutton2代碼,它的onclick事件響應和radiobutton1恰恰相反,代碼如下:

  <input type="radio" name="radiobutton" value="radiobutton" onclick="olduser.style.display='';newuser.style.display='none'">

  完成以上步驟後,就搞定了這個頁面的制作。F12預覽,浏覽器中,我們點擊radiobutton1就會顯示新用戶注冊界面;再點擊radiobutton新用戶注冊界面不可視,老用戶登錄界面顯示。

  通過很簡單的代碼編輯,就可以實現這個非常實用的功能。雖然我們用層也可以實現這樣的效果,但是層在網頁中精確定位遠沒有表格方便,不便於網頁的整體布局設計。


XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved