如何用DW8實現網頁區域內選擇顯示

我們在製作網頁時，有時會遇到這樣的情況：根據使用者的選擇，顯示不同的內容。比如，製作一個登入網頁，上面有兩個表格，一個給新使用者註冊用，一個供老使用者登入用。我們想在頁面上放兩個radiobutton，根據使用者的選擇，來顯示登錄檔格或登入表格。這些操作是在同一個頁面中完成的，不需要跳轉到其它頁面或重新整理當前頁面。下面是小編為大家帶來的關於如何用DW8實現網頁區域內選擇顯示的知識，歡迎閱讀。

開啟Dreamweaver8，新增兩個單選按鈕，名稱分別為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="lay='';lay='none'"＞

程式碼含義是點選radiobutton1時，設定表格newuser的display屬性為空，即可視，表格olduserdisplay屬性為none不可視。

同樣編輯radiobutton2程式碼，它的onclick事件響應和radiobutton1恰恰相反，程式碼如下：

＜input type="radio" name="radiobutton" value="radiobutton" onclick="lay='';lay='none'"＞

完成以上步驟後，就搞定了這個頁面的製作。F12預覽，瀏覽器中，我們點選radiobutton1就會顯示新使用者註冊介面；再點選radiobutton新使用者註冊介面不可視，老使用者登入介面顯示。

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