伊那谷で働くWebデザイナーの日記

前回製作したアコーディオンパネルと同様に、限られたスペースを有効に使えるタブパネルを作りました。

難しかった場所はスクリプトに出てくる、

li:not("+$("ul.tab li a.selected").attr("href")+")

という部分でした。訳すと「クラス"tab"を持つul要素以下のli要素以下のクラス"selected"を持つa要素の属性値と一致しないli要素」になります。

これでまずselectedが設定されているa要素意外に対応するpanelを指定したことになり、それをhide()で隠しています。

あと今回は、メニューリストの部分にCSS3を使ってグラデーションをかけてみました。
safariやgoogle chromeで見ると綺麗なグラデーションがかかっています。  続きを読む