網頁分割頁面

我想要在自己的網頁中分割兩個頁面
左邊頁面負責讓客戶選擇自己要的連結(以Button)
右邊負責顯示網頁。


大概如下圖:

首先新增一個網頁(負責載入分割頁面 如main.html)
程式碼如下:
===============================================

 

   

===============================================

      意思是要在此網頁中新增一個分割頁面(frame)，

      其初始頁面為"linkFrame.html"(到時候的選擇頁面) ==>顯示在網頁左邊(如圖:選擇頁面)

   

      新增一個分割頁面，

      其初始顯示網頁為"a.html"(用來負責顯示) ==>顯示在網頁右邊(如圖:顯示頁面)

新增一個負責顯示連結按鈕的網頁(如:linkFrame.html)

程式碼如下:

===================================================================

onClick="parent.frames['right'].location = 'a.html'" value="A"  style="width:100px;height:40px" >

onClick="parent.frames['right'].location = 'b.html'" value="B" style="width:100px;height:40px" >

onClick="parent.frames['right'].location = 'c.html'" value="C" style="width:100px;height:40px" >

===================================================================

其中的onClick 是當Button按下之後所要執行的事件。

   onClick="parent.frames['right'].location = 'a.html'" value="A"

表示當Button按下時，當前頁面右邊的Frame顯示a.html的網頁。

因此我們在main.html中將此linkFrame.html載入在左邊Frame。

當Button按下時，會將對應的網頁顯示在當前網頁(main.html)右邊的Frame中。

其中a、b、c.html的程式碼如下:

====================================

這是 X 網頁

====================================

X 為a、b、c網頁的差異處，其餘相同。

完成以上步驟後，就可以達到同一個網頁點選不同連結可顯示不同頁面在右邊的功能。

附上本章的教學範例:

https://docs.google.com/file/d/0B1YLsk5Q6WOSeEFYbmY5bmdkN1E/edit?usp=sharing

參考來源:

http://taiwantc.com/js/js_tut_b_frame0.htm