PCゲーマーのWebデザイン備忘録

PCゲーマーのWebデザイン備忘録。東京都内でWEBデザイナーとして働いています。Webデザインやゲームに関することをブログに書いていきます

【jQuery】タブパネルを使う。

jQueryの基本である要素を重ねることを使い、タブパネルを作ります。

f:id:game-web-design:20141020111103p:plain

タブパネル実行例

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を取得して、その内容をパネルに表示させます。