タブ1</p> <p class="tab_btn">タブ2</p> <p cl。AtelierRoi"> タブ1</p> <p class="tab_btn">タブ2</p> <p cl" />
アトリエロワ

jqueryとcssでタブ

html

<p class="tab_btn active">タブ1</p>
<p class="tab_btn">タブ2</p>
<p class="tab_btn">タブ3</p>


  <div class="tab_panel active">
    <p>タブ1</p>
  </div>
  <div class="tab_panel">
    <p>タブ2</p>
  </div>
  <div class="tab_panel">
    <p>タブ3</p>
  </div>

CSS

.btn_area {
            margin: 0 10px;
            display: flex;
        }
.tab_btn {
            width: 188px;
            padding: 8px 0;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease 0s;
        }
.tab_btn+.tab_btn {
            margin-left: 8px;
        }
.tab_btn:hover {
            background-color: #dce1e4;
        }
.tab_btn.active {
            background: #07539f;
            color: #fff;
        }
 .panel_area {
            padding: 20px;
        }
.tab_panel {
            display: none;
        }
 .tab_panel.active {
            display: block;
        }

jquery

$(function(){
  $('.tab_btn').click(function() {
    var index = $('.tab_btn').index(this);
    $('.tab_btn, .tab_panel').removeClass('active');
    $(this).addClass('active');
    $('.tab_panel').eq(index).addClass('active');
  });
});

HOME > javascript > jqueryとcssでタブ

javascript

javascript

+ More