2012/11/08
ポータルサイト風タブパネル
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div id="container"> <ul class="tab"> <li><a href="#tab1" class="selected">JavaScript</a></li> <li><a href="#tab2">CSS</a></li> <li><a href="#tab3">HTML</a></li> <li><a href="#tab4">jQuery</a></li> <li><a href="#tab5">XHTML</a></li> </ul> <ul class="panel"> <li id="tab1">Myanmar is located in southeast Asia between Thailand, China and India. Due to its rapid changes and openess, many see it as the next frontier of business opportunities. CNN and Lonely Planet chose Myanmar as the world's number 2 best destinations 2012. Being the 40th largest country and 25th most populated, Myanmar has so much room for growth. We, together with President U Thein Sein and Daw Aung San Suu Kyi, welcome you all with open arms to travel or to invest in Myanmar.</li> <li id="tab2">Myanmar is located in southeast Asia between Thailand, China and India. Due to its rapid changes and openess, many see it as the next frontier of business opportunities. CNN and Lonely Planet chose Myanmar as the world's number 2 best destinations 2012. Being the 40th largest country and 25th most populated, Myanmar has so much room for growth. We, together with President U Thein Sein and Daw Aung San Suu Kyi, welcome you all with open arms to travel or to invest in Myanmar.</li> <li id="tab3">Myanmar is located in southeast Asia between Thailand, China and India. Due to its rapid changes and openess, many see it as the next frontier of business opportunities. CNN and Lonely Planet chose Myanmar as the world's number 2 best destinations 2012. Being the 40th largest country and 25th most populated, Myanmar has so much room for growth. We, together with President U Thein Sein and Daw Aung San Suu Kyi, welcome you all with open arms to travel or to invest in Myanmar.</li> <li id="tab4">Myanmar is located in southeast Asia between Thailand, China and India. Due to its rapid changes and openess, many see it as the next frontier of business opportunities. CNN and Lonely Planet chose Myanmar as the world's number 2 best destinations 2012. Being the 40th largest country and 25th most populated, Myanmar has so much room for growth. We, together with President U Thein Sein and Daw Aung San Suu Kyi, welcome you all with open arms to travel or to invest in Myanmar.</li> <li id="tab5">Myanmar is located in southeast Asia between Thailand, China and India. Due to its rapid changes and openess, many see it as the next frontier of business opportunities. CNN and Lonely Planet chose Myanmar as the world's number 2 best destinations 2012. Being the 40th largest country and 25th most populated, Myanmar has so much room for growth. We, together with President U Thein Sein and Daw Aung San Suu Kyi, welcome you all with open arms to travel or to invest in Myanmar.</li> </ul> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | #container{ width: 500px; margin: 50px auto; } ul.tab{ padding: 0; } ul.tab li{ list-style-type: none; width: 100px; height: 40px; float: left; } ul.tab li a{ outline: none; background: url("images/tab.jpg"); display: block; color: blue; line-height: 40px; text-align: center; } ul.tab li a.selected{ background: url("images/tab_selected.jpg"); text-decoration: none; color: #333; cursor: default; } ul.panel{ clear: both; border: 1px solid #9FB7D4; border-top: none; padding: 0; } ul.panel li{ list-style-type: none; padding: 10px; text-indent: 1em; color: #333; } |
|
1 2 3 4 5 6 7 8 9 10 11 | $(function(){ $(function(){ $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide(); $("ul.tab li a").click(function(){ $("ul.tab li a").removeClass("selected"); $(this).addClass("selected"); $("ul.panel li").slideUp("fast"); $($(this).attr("href")).slideDown("fast"); return false; }); }); |
説明
① 最初の２行目
|
1 | $("ul.panel li:not("+$("ul.tab li a.selected").attr("href")+")").hide(); |
はタブパネルの初期表示状態を設定しています。
$(“ul.tab li a.selected”).attr(“href”)は、class属性「selected」が設定されているa要素のhref属性を取得しています。
② タブがクリックされたときに発生するclickイベントを設定します。
a要素に対してイベントを設定する場合はreturn false; を必ず記述します。
|
1 2 3 4 | $("ul.tab li a").click(function(){ (中略) return false; }); |
③ タブがクリックされたときは、すべてのタブ(ul.tab li a)からclass属性「selected」をいったん取り除き、
クリックされたタブにだけclass属性「selected」を付け直す処理を設定しています。
|
1 2 | $("ul.tab li a").removeClass("selected"); $(this).addClass("selected"); |
④ 最後にすべてのパネルをいったんhide()で非表示に設定。
$(this).attr(“href”)でクリックされたa要素のhref属性の値を読み出して、
値と同じ名前のid属性を持つパネルをshow()で表示します。
|
1 2 | $("ul.panel li").slideUp("fast"); $($(this).attr("href")).slideDown("fast"); |
Author Profile
スターフィールド編集部
SHARE