> 
> 

CSS HTML jQuery 2023.5.8

タブ

HTML

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="tab-area">
 <div class="tab active">
   タブ１
 </div>
 <div class="tab">
   タブ２
 </div>
 <div class="tab">
   タブ３
 </div>
</div>
<div class="content-area">
 <div class="content show">
   タブ１コンテンツ
 </div>
 <div class="content">
   タブ２コンテンツ
 </div>
 <div class="content">
   タブ３コンテンツ
 </div>
</div>

SCSS

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.tab-area {
  display: flex;
  .tab {
    align-items: center;
    border: 1px solid #000;
    color: #000;
    cursor: pointer;
    display: flex;
    justify-content: center;
  }
  .tab.active {
    background-color: #000;
    color: #fff;
  }
}
.content-area {
  .content {
    display: none;
  }
  .content.show {
    display: block;
  }
}

jQuery

01
02
03
04
05
06
07
08
09
$(function () {
  let tabs = $(".tab");
  $(".tab").on("click", function () {
    $(".active").removeClass("active");
    $(this).addClass("active");
    const index = tabs.index(this);
    $(".content").removeClass("show").eq(index).addClass("show");
  });
});

Category

Recent posts

Category