タブ切り替え（jQuery）

jqueryを使ったタブ切り替えの実装

index.html

<div class="container">
  <ul class="menu">
    <li>
      <a href="">サイトの概要</a>
      <div class="sankaku"></div>
    </li>
    <li>
      <a href="">サービスの内容</a>
      <div class="sankaku"></div>
    </li>
    <li>
      <a href="">お問い合わせ</a>
      <div class="sankaku"></div>
    </li>
  </ul>
  <div class="content">サイトの概要サイトの概要サイトの概要サイトの概要サイトの概要サイトの概要サイトの概要サイトの概要サイトの概要</div>
  <div class="content">サービスの内容サービスの内容サービスの内容サービスの内容サービスの内容サービスの内容サービスの内容サービスの内容</div>
  <div class="content">お問い合わせお問い合わせお問い合わせお問い合わせお問い合わせお問い合わせお問い合わせお問い合わせお問い合わせ</div>
</div>

style.css

* {
  padding: 0;
  margin: 0;
  font-size: 25px;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

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

.tab {
  margin: 0 0 100px 0;
}

.menu {
  display: flex;
  margin-bottom: 50px;
}

.sankaku{
  width: 0;
  height: 0;
  border: 20px solid transparent;
  border-top: 20px solid #333;
  margin: 0 auto;
  transition: all 0.5s ease-out; 
}

.menu li a {　
  width: 200px;
  display:block;
  padding: 8px 0;
  color: #000;
  background: #888;
  text-align: center;
  transition: all 0.5s ease-out;
}

.menu li a.active {　/*クリックされた時に付与される*/
  background: #333;
  color: #fff;
}

.content {
  width: 600px;
  padding: 8px;
  background: #333;
  color: #fff;
}

main.js

$(function(){

  const btns     = $(".menu li a");
  const sankaku  = $(".menu li .sankaku");
  const contents = $(".content");

  contents.not(contents.eq(0)).hide();
  sankaku.not(sankaku.eq(0)).css("opacity", 0);

  btns.each(function(){
    $(this).on("click", function(e){
      e.preventDefault();
      let index = btns.index(this);
      btns.removeClass("active");
      $(this).addClass("active");
      contents.hide();
      contents.eq(index).fadeIn();
      sankaku.css("opacity", 0);
      sankaku.eq(index).css("opacity", 1);
    });
  });
});

実際の動き

タブ切り替え