【Chapter9】課題

概要と目標 jQueryでタブパネルにチャレンジ。

完成例を参考にタブパネルを作成して下さい。
デザインは任意とします。

今回のゴール

RERUN

新しいウインドウで表示する

解答例解答例を確認しよう。

完成したら、解答例を確認しましょう。
絶対的な正解はないので、参考程度に確認しましょう。

index.html

chapter09/tab/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>タブパネル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>タブパネル</h1>

  <div class="container">
    <div class="js-tab tab">
      <div class="js-tabNav tab_nav">
        <ul>
          <li><a href="#tab1">tab1へ</a></li>
          <li><a href="#tab2">tab2へ</a></li>
          <li><a href="#tab3">tab3へ</a></li>
        </ul>
      </div>
      <!-- /.tab_nav -->

      <div class="js-tabBody tab_body">
        <div id="tab1" class="tab_content">
          <h2>Tab1</h2>
          <p>これは、<em>tab1</em>の内容です</p>
        </div>
        <!-- /#tab1-->

        <div id="tab2" class="tab_content">
          <h2>Tab2</h2>
          <p>これは、<em>tab2</em>の内容です</p>
        </div>
        <!-- /#tab2-->

        <div id="tab3" class="tab_content">
          <h2>Tab3</h2>
          <p>これは、<em>tab3</em>の内容です</p>
        </div>
        <!-- /#tab3-->

      </div>
      <!-- /.tab_body-->
    </div>
    <!-- /.js-tab-->
  </div>
  <!-- /.container -->

  <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
  <script src="app.js"></script>
</body>
</html>

答えを見る

app.js

chapter09/tab/app.js

$(function () {
  // 先頭のパネル以外非表示にしておく
  $('.js-tabBody > div:not(:eq(0))').hide();

  // 先頭のナビに「is-active」を付けておく
  $('.js-tabNav li:first-child a').addClass('is-active');

  $('.js-tabNav a').click(function () {

    // 一度全てのパネル非表示
    $('.js-tabBody > div').hide();

    // イベントを発生した要素の href属性を取得し、フェードで表示
    var target = $(this).attr('href');
    $(target).fadeIn(500);

    // 「is-active」クラスを外し、イベントが発生した要素に付ける
    $('.js-tabNav .is-active').removeClass('is-active');
    $(this).addClass('is-active');
  });
});

答えを見る

style.css

chapter09/tab/style.css

body {
  background-color: #eee;
}

h1 {
  text-align: center;
}

.container {
  margin: 0 auto;
  width: 690px;
}

.tab {
  background-color: #fff;
  -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .16);
          box-shadow: 0 0 8px rgba(0, 0, 0, .16);
}

.tab_nav ul {
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tab_nav li {
  float: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin: 0;
  width: 33.33333%;
  text-align: center;
}

.tab_nav li + li {
  border-left: 1px solid #666;
}

.tab_nav a {
  position: relative;
  display: block;
  padding: 1em;
  background-color: #212121;
  color: #666;
  text-decoration: none;
  -webkit-transition: all ease-in-out .3s;
  transition: all ease-in-out .3s;
}

.tab_nav a:after {
  position: absolute;
  right: 0;
  bottom: -3em;
  left: 0;
  margin: 0 auto;
  width: 1em;
  height: 1em;
  background-color: #fff;
  content: '';
  -webkit-transition: all ease-in-out .3s;
  transition: all ease-in-out .3s;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);;
}

.tab_nav a:hover {
  background-color: #333;
  color: #fff;
}

.tab_nav .is-active {
  background-color: #212121;
  color: #fff;
}

.tab_nav .is-active:after {
  bottom: -.5em;;
}

.tab_content {
  padding: 1em;
}

答えを見る

まとめ jQueryはCSSの用にDOMを操作できる。

jQueryは手軽にDOMを操作することができる。
ただし、ユーザーに取って無駄な動きはストレスに感じるので慎重に使う。

jQueryはJavaScriptのライブラリ
CSSのようにDOMを操作できる

Chapter09 課題

index.html

app.js

style.css