【jQuery】タブパネルを使う。
jQueryの基本である要素を重ねることを使い、タブパネルを作ります。
タブパネル実行例
HTML:
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>タブパネル</title> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery-1.11.1.min.js"></script> </head> <body> <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">タブ1 Lorem ipsum(中略)</li> <li id="tab2">タブ2 Nam cursus(中略)</li> <li id="tab3">タブ3 Pellentesque (中略)</li> <li id="tab4">タブ4 Vestibulum(中略)</li> <li id="tab5">タブ5 Vestibulum (中略)</li> </ul> </div> <script> $(function(){ $('ul.panel li:not('+$('ul.tab li a.selected').attr('href')+')').hide(); $('ul.tab li a').click(function(){ $('ul.tab li a.selected').removeClass('selected'); $(this).addClass('selected'); $('ul.panel li').hide(); $($(this).attr('href')).show(); return false; }); }); </script> </body> </html>
CSS:
@charset "utf-8"; /* reset */ html,body,div,ul,li{ margin: 0; padding:0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } a { text-decoration: none; } ul { list-style: none; } /* container */ #container{ width: 500px; margin: 50px auto; } ul.tab li{ width: 100px; height: 40px; float: left; } ul.tab li a{ background:url(../img/tab.jpg); display: block; color: blue; line-height: 40px; text-align: center; overflow:hidden; } ul.tab li a.selected{ background:url(../img/tab_selected.jpg); text-decoration: none; color: #333; cursor: pointer; } ul.panel{ overflow: hidden; border: 1px solid #9FB7D4; border-top: none; } ul.panel li{ padding: 16px; color: #333; }
jQueryの解説
今回はページ内リンクを使っているので、href属性をそのままID名として引き出して使うことができます。つまり「.attr('href');」を利用してID名を取得して使うことが出来ます。それを念頭において解説をします。
2行目
$('ul.panel li:not('+$('ul.tab li a.selected').attr('href')+')').hide();
- 「ul.panel li」の中の a の要素が class="selected" でない「ul.panel li」(パネル)を非表示にしています。
3行目~8行目
$('ul.tab li a').click(function(){ $('ul.tab li a.selected').removeClass('selected'); $(this).addClass('selected'); $('ul.panel li').hide(); $($(this).attr('href')).show(); return false;
- 「ul.tab li a」(タブボタン)が押されたときに、その時「ul.tab li」の中の「a.selected」のクラス「.selected」を削除します。
- クリックされた「ul.tab li a」に対して、クラス「selected」を追加します。
- 今表示されている「ul.panel li」を非表示にします。
- クリックされた「ul.tab li a」の属性hrefを取得して、その内容をパネルに表示させます。