Tabs and jQuery 頁籤設計

MOTUDO上方有個調整幾個方格的頁籤，做這個已經一陣子了，想要改一下比較活潑，幾年前買的Don't Make Me Think書現在又拿出來看，主要是書中強力推薦使用 tab 頁籤的方式來當做網頁的導覽，這種技巧的好處書中 Four reasons why I love tabs (P79) 提到四點。

• self-evident 一看就明白用途
  
• hard to miss 很難視而不見
  
• slick 感覺有趣但是 HTML 可以很輕巧
  
• suggest a physical space 頁籤活化後，形成該頁浮到前面的視覺效果

基本上原來格式已經差不多，現在像要做的是滑鼠移過去的圖示效果，請參閱 jQuery Tutorials for Designers 的 5b. Animated hover effect #2，因為用 title 比較方便排版。

這裡的 jQuery: The Write Less, Do More, JavaScript Library 直接用 AJAX Libraries API 的版本。 載入 http://www.google.com/jsapi 之後，加上 google.load("jquery", "1.2.6") 就可以用 jQuery 1.2.6 版了，不用另外上傳 jquery.js。

結論是做完就後悔了，第一是 IE7 中，hover.png 會先出現一個黑框然後才變成透明，看起還好像壞掉，另外沒有預期中資訊比較豐富，雜訊反而等於多一層，最後還是拿掉，但是把字體改大一點。

延伸

1. MOTUDO 網誌: jQuery 做簡易問答網頁
2. MOTUDO 網誌: jQuery