恵比寿のWebサイト制作・Webデザインチームのブログ。Webデザインやコーディング、SEO対策まで幅広く手掛けています。

恵比寿のデザイン制作チームのブログです。

Webデザイン、
Web制作、
SEO対策の
ご依頼・ご相談

Contact

別ページの指定したタブを開く方法

投稿日:




 

以前、スムーズにコンテンツを切り替えるタブメニューを紹介しました。
(以前紹介したタブメニューはコチラ↓↓)
jQueryで滑らかにコンテンツを切り替えるタブメニューを作成する

 

 

今回は少し応用編。
別ページから指定したタブを開く、タブメニューについてご紹介します!

早速作成していきましょう!

HTMLで形作り

<div class="tabs">
  <ul class="tabs-title tabs-button">
    <li><a href="#tab1">A</a></li>
    <li><a href="#tab2">B</a></li>
    <li><a href="#tab3">C</a></li>
    <li><a href="#tab4">D</a></li>
  </ul>
  <div class="tabs-contents">
    <div class="tabs-contents__box">
      <p>Aの内容</p>
    </div>
    <div class="tabs-contents__box hide">
      <p>Bの内容</p>
    </div>
    <div class="tabs-contents__box hide">
      <p>Cの内容</p>
    </div>
    <div class="tabs-contents__box hide">
      <p>Dの内容</p>
    </div>
  </div>
</div>

CSSで形を整える

CSSは皆さんの好きなように記述してください!下記はデモで使用したcssです。


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.tabs {
  max-width: 1200px;
  margin: 2em auto;
}

.tabs ul {
  display: flex;
  justify-content: space-around;
}

.tabs ul li {
  width: calc(100%/4);
  border: 1px solid #B5B5B5;
  list-style-type: none;
  transition: all 0.2s ease-out;
}

.tabs ul li .is-active {
  color: #324DB5;
  border-bottom: 5px solid #324DB5;
  padding: 10px;
}

.tabs ul li a {
  text-decoration: none;
  color: #4AABD6;
  display: block;
  border-bottom: 5px solid #fff;
  border-top: 5px solid #fff;
  padding: 10px;
  text-align: center;
  font-size: 25px;
  font-weight: bold;
  outline: none;
}

.tabs-box {
  width: 100%;
  height: 300px;
  padding: 10px;
  color: #212121;
  border: 1px solid #B5B5B5;
  border-top: none;
  font-size: 50px;
  line-height: 300px;
  text-align: center;
}

.hide {
  display: none;
}

jqueryで指定したタブに飛ばす

$(function () {
  //繰り返し処理
  var buttons = $('.tabs-switch a');
  buttons.each(function (index) {
    $(this).on('click', function () {
      //クラスの追加、削除
      buttons.removeClass('is-active');
      $(this).addClass('is-active');
      // クリックすると同じ番号のコンテンツを非表示にします
      $('.tabs-box__contents').hide().eq(index).fadeIn();
    })
  })
  // URLの#以下を取得
  var hash = location.hash || '#tab1';
  // URLの中に#tab~がマッチするか取得。
  hash = hash.match(/^#tab\d+/)[0];
  // 繰り返し処理
  buttons.each(function (index) {
    // hash取得したものとhrefが同じ場合
    if (hash === $(this).attr('href')) {
      // クラスにis-activeを付与
      $(this).addClass('is-active');
      // クリックするとインデックス番号で選別して非表示、表示
      $('.tabs-contents__box').hide().eq(index).show();
    }
  })
})

デモ

参考サイト

https://irohacross.net/2015/02/jquery_tab.html
https://www.tam-tam.co.jp/tipsnote/javascript/post9911.html

 




この記事をシェアする

  • Twitter
  • Facebook
  • BookmarkB!
  • Pocket

Related Entries

この記事を書いた人

noda

noda

めざせ万能デザイナー。HTML/CSS、JavaScript、PHP、Photoshop、Illustratorを扱っています。好きな食べものはうどん。