탭메뉴 좌우버튼으로 컨트롤하기

탭메뉴에 좌우 컨트롤기능을 넣어보자

<div class="tabBox">
        <div class="tabMenu">
            <ul>
                <li class="active"><a href="javascript:;">tab1</a></li>
                <li><a href="javascript:;">tab2</a></li>
                <li><a href="javascript:;">tab3</a></li>
                <li><a href="javascript:;">tab4</a></li>
            </ul>
        </div>
        <div class="tabCont">
            <div class="cont1 active">cont1</div>
            <div class="cont2">cont2</div>
            <div class="cont3">cont3</div>
            <div class="cont4">cont4</div>
        </div>
        <div class="arrow">
            <a href="javascript:;" class="prev">←</a>
            <a href="javascript:;" class="next">→</a>
        </div>
    </div>

* {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .tabBox {
            width: 500px;
            position: relative;
        }

        .tabMenu ul {
            display: flex;
        }

        .tabMenu ul li {
            width: 25%;
            background-color: aliceblue;
            display: flex;
        }
        .tabMenu ul li a {width:100%; display: inline-block; padding: 10px; text-align: center;}

        .tabMenu ul li.active {
            background-color: dodgerblue;
        }

        .tabCont>div {
            display: none;
            padding: 10px;
            background-color: pink;
            height: 50px;
        }

        .tabCont>.active {
            display: block;
        }

        a {
            text-decoration: none;
            font-size: 30px;
            color: #000;
        }

        .arrow a {
            width: 30px;
            height: 30px;
            position: absolute;
            color: #fff;
            font-size: 20px;
            border-radius: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .arrow .prev {
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

        .arrow .next {
            right: 0;
            top: 50%;
            transform: translateY(-50%);
        }

let tabMenu = $('.tabMenu ul li a');
        let tabCont = $('.tabCont div');
        let next = $('.next');
        let prev = $('.prev');
        tabMenu.each(function (idx, item) {
            tabMenu.eq(idx).click(function () {
                tabMenu.parent().removeClass('active');
                tabMenu.parent().eq(idx).addClass('active');
                tabCont.removeClass('active');
                tabCont.eq(idx).addClass('active');

                var currentNum = $('.tabMenu li.active').index();
                if (currentNum == 3) {
                    next.css({ 'display': 'none' })
                } else {
                    next.css({ 'display': 'flex' })
                }
                if (currentNum == 0) {
                    prev.css({ 'display': 'none' })
                } else {
                    prev.css({ 'display': 'flex' })
                }
            })
        })
        let num = 0;
        next.on('click', function (e) {
            var currentNum = $('.tabMenu li.active').index();
            var num = currentNum + 1;

            if (num > 3) {
                num = 0;
            }

            if (num == 3) {
                next.css({ 'display': 'none' })
            } else {
                next.css({ 'display': 'flex' })
            }

            if (num > 0) {
                prev.css({ 'display': 'flex' })
            }
            tabMenu.parent().removeClass('active');
            tabCont.removeClass('active');
            tabMenu.parent().eq(num).addClass('active');
            tabCont.eq(num).addClass('active');
        });
        prev.on('click', function (e) {
            var currentNum = $('.tabMenu li.active').index();
            var num = currentNum - 1;

            if (num < 0) {
                num = 3;
            }

            if (num == 0) {
                prev.css({ 'display': 'none' })
            } else {
                prev.css({ 'display': 'flex' })
            }
            if (num < 3) {
                next.css({ 'display': 'flex' })
            }
            tabMenu.parent().removeClass('active');
            tabCont.removeClass('active');
            tabMenu.parent().eq(num).addClass('active');
            tabCont.eq(num).addClass('active');
        });

제이쿼리의 기능인 each문을 활용하여 해당번호를 구하여
active된 index번호를 가져와 변수 num으로 컨트롤 해준다.

let tabMenu = $('.tabBox01 .tabMenu ul li a');
  let tabCont = $('.tabBox01 .tabCont div');
  let next = $('.tabBox01 .next');
  let prev = $('.tabBox01 .prev');

  function updateTab(num) {
      tabMenu.parent().removeClass('active');
      tabCont.removeClass('active');
      tabMenu.parent().eq(num).addClass('active');
      tabCont.eq(num).addClass('active');
      next.toggle(num < tabMenu.length - 1);
      prev.toggle(num > 0);
  }

  tabMenu.click(function () {
      updateTab($(this).parent().index());
  });

  next.click(function () {
      let num = $('.tabBox01 .tabMenu li.active').index() + 1;
      updateTab(num >= tabMenu.length ? 0 : num);
      console.log(num,tabMenu.length- 1)
  });

  prev.click(function () {
      let num = $('.tabBox01 .tabMenu li.active').index() - 1;
      updateTab(num < 0 ? tabMenu.length - 1 : num);
      console.log(num,tabMenu.length)
  });

요약한 코드로 다시 작성한 형태.