Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
45
Help us understand the problem. What is going on with this article?
@Chinats

jQueryとCSSでシンプルなタブ切り替え

More than 3 years have passed since last update.

jQueryとCSSでシンプルなタブ切り替え

条件

・カレント表示もできるタブ切り替え
・なるべくシンプルな記述
・html構造や装飾が変わっても使いまわせる

HTML

html
<div class="ChangeElem_Btn_Content">
  <button class="ChangeElem_Btn">1番目のタブ</button>
  <button class="ChangeElem_Btn">2番目のタブ</button>
  <button class="ChangeElem_Btn">3番目のタブ</button>
</div>
<ul>
  <li class="ChangeElem_Panel">1番目のコンテンツ</li>
  <li class="ChangeElem_Panel">2番目のコンテンツ</li>
  <li class="ChangeElem_Panel">3番目のコンテンツ3</li>
</ul>

[補足]
・タブに class="ChangeElem_Btn" を、中身に ' class="ChangeElem_Panel" を付与します。
・何番目のタブをクリックしたら何番目の要素を表示という考え方なので、タブも中身もちゃんと上から順番に並べます。
ChangeElem_Btn_Contentは装飾と可読性の関係で残しています。 無くても機能上支障はありません。html構造についてもbtnでなくてもulでなくても大丈夫です。

CSS

タブの中身を初期非表示

css
.ChangeElem_Panel{
  display: none;
}

[補足]
・タブの中身を一旦隠しています。
・これをベースに使い回す前提のため、タブ自体の装飾は割愛しています。初期1番目のタブとカレントタブに is-active クラスがつきますので、 is-active クラスの有無でカレントと通常時のタブの装飾を切り替えています。
→サンプルはこちら

jQuery

jQuery
$(function () {
  /*初期表示*/
  $('.ChangeElem_Panel').hide();
  $('.ChangeElem_Panel').eq(0).show();
  $('.ChangeElem_Btn').eq(0).addClass('is-active');
  /*クリックイベント*/
  $('.ChangeElem_Btn').each(function () {
    $(this).on('click', function () {
      var index = $('.ChangeElem_Btn').index(this);
      $('.ChangeElem_Btn').removeClass('is-active');
      $(this).addClass('is-active');
      $('.ChangeElem_Panel').hide();
      $('.ChangeElem_Panel').eq(index).show();
    });
  });
});

最後に

とにかくシンプル。かつ、html構造や装飾が変わってもささっと使いまわせるように作ってます。
→サンプルはこちら

45
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Chinats
Rubyと仲良くなりたい。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
45
Help us understand the problem. What is going on with this article?