Question

我构建了一个包含多个标签和相应内容的标签容器，只有在单击相应标签时才能看到该标签。到目前为止，这种方法很有效，但我尝试添加两个按钮，这些按钮将导航到下一个和上一个选项卡，我不知道如何实现这一点。

您将在下面找到我迄今所做的工作。我认为它没有那么好的JS代码，也许有人可以给我一些提示来改进它。

提前感谢您的帮助

＆＃13;

      $(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');
        });


      });

＆＃13;

      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;
      }

＆＃13;

<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>

＆＃13;

Answer 1

您可以使用触发器（＆＃39;点击＆＃39;）以编程方式点击所需的标签。这样，为标签更改编写的所有代码都将自动执行。例如，请参阅以下代码：

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

请参阅JsFiddle here

从选项卡框

1 个答案: