javascript - 从选项卡式框中滚动到下一个和上一个选项卡

Question

我构建了一个选项卡容器，其中包含多个选项卡和相应的内容，仅当单击相应的选项卡时才可见。到目前为止效果很好，但我尝试添加两个按钮来导航到下一个和上一个选项卡，但我不知道如何实现这一点。

您将在下面找到我到目前为止所做的事情。我认为这不是很好的 JS 代码，也许有人可以给我一些提示来改进它。

预先感谢您的帮助

      $(document).ready(function(){

        // hide all contents accept from the first div
        $('.tabContent div:not(:first)').toggle();

        // hide the previous button
        $('.previous').hide();

        $('.tabs li').click(function () {

            if($(this).is(':last-child')){
              $('.next').hide();
            }else{
              $('.next').show();
            }

            if($(this).is(':first-child')){
              $('.previous').hide();
            }else{
              $('.previous').show();
            }

            var position = $(this).position();
            var corresponding = $(this).data("id");

            // scroll to clicked tab with a little gap left to show previous tabs
            scroll = $('.tabs').scrollLeft();
            $('.tabs').animate({'scrollLeft': scroll+position.left-30},200);

            // hide all content divs
            $('.tabContent div').hide();

            // show content of corresponding tab
            $('div.' + corresponding).toggle();

            // remove active class from currently not active tabs
            $('.tabs li').removeClass('active');

            // add active class to clicked tab
            $(this).addClass('active');
        });


      });

      body{
        background-color: gray;
      }

      *{
        box-sizing: border-box;
      }

      .contentWrapper{
        width: 350px;
        margin: 0 auto;
        position: relative;
      }

      .tabsWrapper{
        width: 100%;
        height: 24px;
        overflow: hidden;
        position: relative;
      }

      .tabs{
        margin: 0;
        padding: 0;
        position: absolute;
        top: 0;
        bottom: -25px;
        left: 0;
        right: 0;
        white-space: nowrap;
        overflow: auto;
      }

      .tabs li{
        display: inline-block;
        background-color: #ccc;
        padding: 3px 8px;
        cursor: pointer;
      }

      .tabs li.active{
        background-color: white;
      }

      .next, .previous{
        position: absolute;
        padding: 2px 4px;
        top: 0;
        background-color: white;
      }

      .next{
        right: -25px;
      }

      .previous{
        left: -25px;
      }

      .tabContent{
        width: 100%;
        background-color: white;
        padding: 15px;
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contentWrapper">
      <div class="tabsWrapper">
        <ul class="tabs">
          <li data-id="contentOne" class="active">CSS</li>
          <li data-id="contentTwo">HTML, HTML, HTML</li>
          <li data-id="contentThree">JS and jQuery</li>
          <li data-id="contentFour">one more tab</li>
          <li data-id="contentFive">another tab</li>
          <li data-id="contentSix">the last tab</li>
        </ul>
      </div>
      <a class="next">></a>
      <a class="previous"><</a>
      <div class="tabContent">
        <div class="contentOne">
          <p>this is the CSS tab Content</p>
          <a href="">next</a>
        </div>
        <div class="contentTwo">
          <p>this is the HTML tab Content<br><br>1</p>
          <a href="">next</a>
        </div>
        <div class="contentThree">
          <p>this is the JS tab Content</p>
          <a href="">next</a>
        </div>
        <div class="contentFour">
          <p>this is the sample Content</p>
          <a href="">next</a>
        </div>
        <div class="contentFive">
          <p>this is more sample Content</p>
          <a href="">next</a>
        </div>
        <div class="contentSix">
          <p>this is more than more sample Content</p>
          <a href="">next</a>
        </div>
      </div>
    </div>

Answer 1

您可以使用触发器('click')以编程方式单击所需的选项卡。这样，为选项卡更改编写的所有代码都将自动执行。例如看下面的代码:

$('div a').click(function(e){
    e.preventDefault();
    $('li.active').next('li').trigger('click');
});

参见JsFiddle here