탭메뉴 구현이 안되요 도와주세요 ㅠㅠ 채택완료

</p>

<p><script type="text/javascript">

$('.tab_menu_btn').on('click',function(){

  //버튼 색 제거,추가

  $('.tab_menu_btn').removeClass('on');

  $(this).addClass('on')</p>

<p>  //컨텐츠 제거 후 인덱스에 맞는 컨텐츠 노출

  var idx = $('.tab_menu_btn').index(this);</p>

<p>  $('.tab_box').hide();

  $('.tab_box').eq(idx).show();

});</p>

<p></script></p>

<p><style>

button {

  background:none;

  border:0;

  outline:0;

  cursor:pointer;

}

.tab_menu_container {

  display:flex;

}

.tab_menu_btn {

  width:80px;

  height:40px;

  transition:0.3s all;

}

.tab_menu_btn.on {

  border-bottom:2px solid #df0000;

  font-weight:700;

  color:#df0000;

}

.tab_menu_btn:hover {

  color:#df0000;

}

.tab_box {

  display:none;

  padding:20px;

}

.tab_box.on {

  display:block;

}

</style></p>

<p>

<div class="tab_wrap">

  <div class="tab_menu_container">

    <button class="tab_menu_btn on" type="button">채치수</button>

    <button class="tab_menu_btn" type="button">강백호</button>

    <button class="tab_menu_btn" type="button">서태웅</button>

    <button class="tab_menu_btn" type="button">송태섭</button>

    <button class="tab_menu_btn" type="button">정대만</button>

    <button class="tab_menu_btn" type="button">권준호</button>

    <button class="tab_menu_btn" type="button">양호열</button>

  </div> <!-- tab_menu_container e --></p>

<p>  <div class="tab_box_container">

    <div class="tab_box on">고릴라 주장</div>

    <div class="tab_box">빨간 원숭이</div>

    <div class="tab_box">농구천재</div>

    <div class="tab_box">북산의 돌격대장</div>

    <div class="tab_box">돌아온 풍운아</div>

    <div class="tab_box">식스맨</div>

    <div class="tab_box">사실 작중 제일 멋쟁이</div>

  </div> <!-- tab_box_container e -->

</div> <!-- tab_wrap e -->