跳頁選單

剛剛把我部落格的「友站連結」改成跳頁選單的形式，版面看起來乾淨了許多。

跳頁選單是用 HTML 中的 select 標籤再加上 JavaScript 程式而成。首先我們要把要的連結組先做成 HTML select 選單：

<select>
 <option selected="selected">:: 請選擇連結 ::
 <option value="http://zeroplex.blogspot.com">Zeroplex部落格
 <option value="http://www.flickr.com/photos/johnroyer/">我的相簿
</select>

改好了樣子就會長的像這樣：

這時外觀已經完成，只差沒有選擇以後會跳頁的動作。所以我們要在 select 後方插入一段 JavaScript 來完成跳頁的功能。

<select  onchange="if(this.selectedIndex && this.selectedIndex!=0){window.location=this.value;}this.selectedIndex=0;">
 <option selected="selected">:: 請選擇連結 ::
 <option value="http://aleiku.blogspot.com/">Aleiku
 <option value="http://www.flickr.com/photos/johnroyer/">我的相簿
</select>

上面這段加入後，只要在選單有改變時，就會自動跳到你設定的網頁連結。

新增的這段程式中，this.value 表示這個標籤(this)裡面的值(option value)，而 window.location 則是瀏覽器這個視窗(window)顯示的網址(location)。所以說當選單一旦有改變(OnChange)，就會觸發這段 JavaScript 讓瀏覽器改變網址。

如果你希望瀏覽器是另外開一個視窗來開啟網頁連結，而不是就此離開你的網站，就把 window.location 改成 window.open()。

<select onchange="if(this.selectedIndex && this.selectedIndex!=0){window.open(this.value);}this.selectedIndex=0;">
   <option selected="selected">:: 請選擇連結 ::
   <option value="http://zeroplex.blogspot.com">Zeroplex部落格
   <option value="http://www.flickr.com/photos/johnroyer/">我的相簿
</select>

Comments (2) on “跳頁選單”

發佈留言取消回覆

Comments (2) on “跳頁選單”

發佈留言 取消回覆

發佈留言取消回覆