タブパネルのつくり方 - Webデザインを学ぶ

f:id:hourin-g0913:20160323093831p:plain

<style>
html,body,ul,li{
 margin: 0;
 padding: 0;
}
#container{
 width: 500px;
 margin: 50px auto;
}
ul.tab{
pading: 0px;}

ul.tab li{
 list-style-type: none;
 width: 100px;s
 height: 40px;
 float: left;} 
 
ul.tab li a{
 background: url("img/tab.jpg");
 display: block;
 overflow: hidden;
 color: blue;
 line-height: 40px;
 text-align: center;
}
ul.tab li a.selected{
 background: url("img/tab_selected.jpg");
 text-decoration: none;
 color: #333;
 cursor: default;
 }
ul.panel{
 clear: both;
 border: 1px solid #9FB7D4;
 border-top: none;
 padding:20;
} 
ul.panel li{
 list-style-type: none;
 padding: 0 20px;
 text-indent:10px;
 text-indent:1em;
 color: #333;
}
</style>
</head>

<body>
<div id="container">
<ul class="tab">
<li><a href="#tab1" class="selected">JavaScript</a></li>
<li><a href="#tab2">HTML</a></li>
<li><a href="#tab3">CSS</a></li>
<li><a href="#tab4">jQuery</a></li>
<li><a href="#tab5">XHTML</a></li>
</ul>
<ul class="panel">
<li id="tab1">ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。<img src="http://placehold.it/460x150"></li>
<li id="tab2">ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。<img src="http://placehold.it/460x150"></li>
<li id="tab3">ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。<img src="http://placehold.it/460x150"></li>
<li id="tab4">ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。<img src="http://placehold.it/460x150"></li>
<li id="tab5">ここに内容が入ります。ここに内容が入ります。ここに内容が入ります。<img src="http://placehold.it/460x150"></li>
</ul>
</div><!--container-->
</body>
</html>

スクリプトの書き方
①jQueryの命令を書くところをつくる。

$(document).ready( function(){

   });

②panelクラスが付いているリストを非表示にする。（＝タブしか見えていない状態）

$(document).ready( function(){
 $('ul.panel li').hide();
   });

③selectedクラスが付いているタブのhrefの値を持って来て、それを表示している。
（この場合、hrefのリンク先はid"tab1"なので、id"tab1"が付けられた部分を表示している。）

$(document).ready( function(){
 $('ul.panel li').hide();
 $( $('ul.tab li a.selected').atter('href')).show();
   });

④tabクラスが付いているリストをクリックした時の命令を書く場所をつくる。

$(document).ready( function(){
 $('ul.panel li').hide();
 $( $('ul.tab li a.selected').atter('href')).show();
   $("ul.tab li a").click(function(){

   });
});

⑤リストselectedクラス属性を消す。押された要素にselectedクラスを追加する。という記述を追加。

$(document).ready( function(){
 $('ul.panel li').hide();
 $( $('ul.tab li a.selected').atter('href')).show();
   $("ul.tab li a").click(function(){
      $('ul.tab li a.selected').removeClass('selected');
      $(this).addClass(' selected ');
 
   });
});

⑥さらに、panelクラスのリストは非表示にする。押された要素のhrefの値を持ってきてそれを表示。ページが移動しないためのreturn falseという記述を追加。

$(document).ready( function(){
 $('ul.panel li').hide();
 $( $('ul.tab li a.selected').atter('href')).show();
   $("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;</span>
   });
});