2007/02/14

跳頁選單

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

跳頁選單是用 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>

2 則留言:

  1. 也可以在option的元素裡加上title的屬性,這樣可以做到連結註解的效果
    ex:
    option title="強者之家" value="http://zeroplex.blogspot.com">Zeroplex部落格

    不過過長的title會對FX造成影響就是了....

    回覆刪除
  2. 這東西我之前也有想過,但是我的邊邊好像沒有文章長,就先擺著了~

    回覆刪除