Q. 탭 메뉴 스크립트를 뷰에서 어떻게 짜야하나요?

기본 아바타 costard 2019. 01. 17. 조회수 511


<ul class="cs-nav">
 <li class="active"><span>NOTICE</span></li>
 <li><span>FAQ</span></li>
 <li><span>Q&A</span></li>
</ul>

<script>
// 탭 클릭 이벤트
$('.cs-nav > li').click(function () {
    var num = $(this).index();
    $('.cs-nav > li, .cs-content-area').removeClass('active');
    $(this).addClass('active');
    csSwiper.slideTo(num, 500);
});
</script>

이 스크립트를 뷰에서 어떻게 구현해야 할까요?

현재 todo 리스트 정도 구현할 수 있는 단계라

어떻게 해야할지 감이 안 오네요 ㅜ

공유하고 보상받기 ♥︎
댓글 0

2개의 답변이 있습니다.

질문자 채택
skyDaddy 답변자인증
센트비 2019. 01. 18 46%의 채택

해당 부분만 예시로 작성해 봤습니다. 감이 오시나요?

<li
  v-for="(item, index) in tabMenu"
  :key="index"
  :class="{ active: index === activeIndex }"
  @click="activeIndex = index"
>

data () {
  return {
    activeIndex: 0
    tabMenu: ['NOTICE', 'FAQ', 'Q&A']
  }
}
댓글 0
큐레이터 채택
파송송계란빡 답변자인증
사이버침해대응센터 2019. 01. 17 54%의 채택

안녕하세요 자바스크립트로 탭 메뉴를 만들고 계시는군요

제가 탭 만들었을때 참고했던 사이트 남겨드립니다.

http://webruden.tistory.com/98

http://imivory.tistory.com/8

댓글 0