切换选项卡的按钮会跳过第一个选项卡

Question

我有两种按钮控制的标签：

1. 一般BootStrap标签按钮 - （ul li） - 左侧的紫色圆形按钮 - 让我们称它们为“侧栏按钮”。

2. 用于按顺序切换标签的外部按钮（从第1个到最后一个，然后从最后一个到第1个） - 在标签下 - 让我们称之为“切换按钮”。

问题是这样的：

单击切换按钮时 - 选项卡按其降序导航。 但是当切换到达最后一个选项卡时 - 它应该返回到第一个选项卡 - 但它不会 - 它“跳过”该选项卡并再次点击一次然后传递到第二个选项卡.... 我已经检查了所有负责触发标签的类 - 看起来很好......

/**
 * Created by Roy Barak on 21-Jan-18.
 */
$(document).ready(function() {


  $('.tabs_div > li').on('click', function() {

    $("span").removeClass("active_bullet");
    $("span").addClass("tab_circle tab_toggler");
    if ($(this).find('span').hasClass('active_bullet')) {

      return;
    } else {
      $(this).find('span').removeClass('tab_circle tab_toggler');
      $(this).find('span').addClass('active_bullet');
    }


  });


  $('.next_btn').click(function() {
    $.each($('.tabs_div > li'), function() {
      $(this).find('a').find('span').removeClass('active_bullet');
      if ($(this).attr('class')) {

        $(this).find('a').find('span').addClass('active_bullet');
      }

    });

    if ($('.tabs_div > li:last-child').hasClass('active')) {

      console.log(123);
      /*  $('.next_btn.tab_circle.tab_toggler').css("transform", "rotateX(180deg)");
       $('.tabs_div > li:last-child').removeClass('active');
       $('.tabs_div > li:first-child').addClass('active'); */
    } else {
      console.log($('.tabs_div > .active').next('li'));
      $('.tabs_div > .active').next('li').find('a').trigger('click');
    }

  });
});

/* Styles go here */


/* line 1, ../../../sass/parme_vous_stylesheet.scss */

.content-wrapper.parme_vous_page {
  background-image: repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);
}


/* line 5, ../../../sass/parme_vous_stylesheet.scss */

.parme_vous_wrapper {
  display: flex;
  width: 100%;
  height: 100vh;
  align-items: center;
  padding: 45px;
}


/* line 16, ../../../sass/parme_vous_stylesheet.scss */

.sidebar-menu>.sidebar-item-special.active {
  background: none;
  background-image: linear-gradient(90deg, #7cd4cf, rgba(124, 212, 207, 0)), repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);
}


/* line 21, ../../../sass/parme_vous_stylesheet.scss */

.sidebar-menu>.sidebar-item-special.active>a {
  padding: 13px 17px 13px 25% !important;
  display: block !important;
}


/* line 25, ../../../sass/parme_vous_stylesheet.scss */

.sidebar-menu>.sidebar-item-special.active>a>span {
  color: white !important;
}


/* line 31, ../../../sass/parme_vous_stylesheet.scss */

.links_hidden {
  visibility: hidden;
}


/* line 35, ../../../sass/parme_vous_stylesheet.scss */

.sidebar-menu .sidebar-item-special.active:before {
  right: -1px;
  top: 31%;
  content: " ";
  position: absolute;
  pointer-events: none;
  margin-top: -30px;
  width: 21px;
  height: 30px;
  /* background: #f00; */
  background-image: repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 21px);
  z-index: -1;
}


/* line 51, ../../../sass/parme_vous_stylesheet.scss */

.sidebar-menu .sidebar-item-special.active:after {
  right: -1px;
  /* top: 103%; */
  content: " ";
  position: absolute;
  pointer-events: none;
  margin-top: -30px;
  width: 21px;
  bottom: -20px;
  height: 30px;
  transform: rotateX(180deg);
  /* background: #f00; */
  background-image: repeating-linear-gradient(45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 21px);
  z-index: -1;
}


/* line 68, ../../../sass/parme_vous_stylesheet.scss */

.sidebar-menu .sidebar-item-special.active:before {
  right: -1px;
  top: 31%;
  content: " ";
  position: absolute;
  pointer-events: none;
  margin-top: -30px;
  width: 21px;
  height: 30px;
  /* background: #f00; */
  background-image: repeating-linear-gradient(-45deg, #7cd4cf, #7cd4cf 1.5px, #49c8c1 2px, #49c8c1 4px);
  -webkit-mask-image: radial-gradient(circle 10px at 0 0, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 21px);
  z-index: -1;
}


/* line 84, ../../../sass/parme_vous_stylesheet.scss */

.remove_pseudo:before {
  width: 0px !important;
  height: 0px !important;
}


/* line 90, ../../../sass/parme_vous_stylesheet.scss */

.remove_pseudo:after {
  width: 0px !important;
  height: 0px !important;
}


/* line 96, ../../../sass/parme_vous_stylesheet.scss */

.sidebar-menu,
.user-panel,
.sidebar-menu>li.header {
  overflow: inherit !important;
}


/* line 101, ../../../sass/parme_vous_stylesheet.scss */

.sidebar-menu,
.user-panel,
.sidebar-menu>li.header {
  overflow: inherit !important;
}


/* line 106, ../../../sass/parme_vous_stylesheet.scss */

.parme_vous_icon {
  width: 200px;
  height: 200px;
  background-color: #3f4760;
}


/* line 112, ../../../sass/parme_vous_stylesheet.scss */

.links_col {
  min-width: 160px;
  min-height: 200px;
  border-radius: 15px;
  background-color: white;
  overflow: hidden;
  margin-bottom: 25px;
  -webkit-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
  -moz-box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
  box-shadow: 11px 10px 31px -8px rgba(0, 0, 0, 0.47);
}


/* line 125, ../../../sass/parme_vous_stylesheet.scss */

.logo_header {
  padding-top: 10%;
  text-align: center;
  min-height: 100px;
}


/* line 132, ../../../sass/parme_vous_stylesheet.scss */

.logo_header img {
  width: 55px;
}


/* line 136, ../../../sass/parme_vous_stylesheet.scss */

.logo_footer {
  padding: 15px;
  color: white;
  text-align: center;
  background-color: #3f4760;
  min-height: 100px;
}


/* line 144, ../../../sass/parme_vous_stylesheet.scss */

.logo_footer p:nth-child(1) {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}


/* line 149, ../../../sass/parme_vous_stylesheet.scss */

.logo_footer p:nth-child(2),
.logo_footer p:nth-child(3) {
  font-family: 'Roboto', sans-serif;
  font-size: 11px;
  color: #aaadb5;
}


/* line 156, ../../../sass/parme_vous_stylesheet.scss */

.links_buttons.parme_vous_bullets {
  text-align: center;
  margin-right: 2%;
}


/* line 161, ../../../sass/parme_vous_stylesheet.scss */

#myTab {
  list-style-type: none;
  display: inline-block;
  padding: 0px;
  margin: 0px;
}


/* line 168, ../../../sass/parme_vous_stylesheet.scss */

#myTab>li>a>span.tab_circle {
  /*border: 2px solid white;*/
  background-color: #5d3c95;
  height: 10px;
  border-radius: 50%;
  width: 10px;
}


/* line 176, ../../../sass/parme_vous_stylesheet.scss */

.active_bullet {
  border: 2px solid white;
  height: 18px;
  border-radius: 50%;
  display: inline-block !important;
  width: 18px;
}


/* line 184, ../../../sass/parme_vous_stylesheet.scss */

#myTab>li>a>span.tab_toggler {
  display: inline-block !important;
  float: none !important;
  font-size: 20px;
  color: white;
}


/* line 192, ../../../sass/parme_vous_stylesheet.scss */

.tab_footer {
  width: 100%;
  display: flex;
  justify-content: center;
}


/* line 198, ../../../sass/parme_vous_stylesheet.scss */

.next_btn:before {
  font-family: FontAwesome;
  content: "\f063";
  position: relative;
  border-radius: 73px;
  border: 8px solid white;
  background-color: white;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://rawgit.com/leafn0de/bootstrap-tabdrop/master/build/bootstrap-tabdrop.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://rawgit.com/leafn0de/bootstrap-tabdrop/master/build/bootstrap-tabdrop.css" rel="stylesheet" />
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="content-wrapper parme_vous_page" style="min-height: 901px;">

  <div class="page_container parme_vous_page">

    <div class="parme_vous_wrapper">
      <div class="links_buttons parme_vous_bullets">
        <ul id="myTab" class="tabs_div">


          <li class="active"><a data-target="#0tab" data-toggle="tab" aria-expanded="true"><span class="active_bullet"></span></a></li>

          <li class=""><a data-target="#1tab" data-toggle="tab" aria-expanded="false"><span class="tab_circle tab_toggler"></span></a></li>

          <li class=""><a data-target="#2tab" data-toggle="tab" aria-expanded="false"><span class="tab_circle tab_toggler"></span></a></li>

        </ul>
      </div>

      <div class="links_cont parme_vous_cont">

        <div class="tab-content">
          <div class="tab-pane active" id="0tab">


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Blog</p>
                    <p>Lorem ipsum dolor sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Mon compte</p>
                    <p>Lorem ipsum dolor sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Blog</p>
                    <p>Lorem ipsum dolor sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>facebook</p>
                    <p>Lorem ipsum dolor sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Mon compte</p>
                    <p>Lorem ipsum dolor sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Tweeter</p>
                    <p>Lorem ipsum dolor sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div class="tab-pane" id="1tab">


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Test 1</p>
                    <p>Lorem ipsum dolor sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Test 2</p>
                    <p>Lorem ipsum dolor sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Linkedin</p>
                    <p>Lorem ipsum dolor sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Linkedin</p>
                    <p>Linkedin</p>
                  </div>
                </div>
              </div>
            </div>


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Tweeter</p>
                    <p>Lorem ipsum dolor sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Facebook</p>
                    <p>Facebook</p>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div class="tab-pane" id="2tab">


            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Test 3</p>
                    <p>Test 3</p>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>Gmail</p>
                    <p>Lorem ipsum dolor sit amet consectuer</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col links_hidden">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>tmp-placeholder</p>
                    <p>tmp-placeholder</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col links_hidden">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>tmp-placeholder</p>
                    <p>tmp-placeholder</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col links_hidden">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>tmp-placeholder</p>
                    <p>tmp-placeholder</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6">

              <div class="links_col links_hidden">
                <div class="parme-vous_links">
                  <div class="logo_header"><img src="">
                  </div>
                  <div class="logo_footer">
                    <p>tmp-placeholder</p>
                    <p>tmp-placeholder</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab_footer">
            <span class="next_btn tab_circle tab_toggler"></span>

          </div>

        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这是工作代码。还有更新的小提琴http://jsfiddle.net/etuokpbt/2/

  $(document).ready(function() {


      $('.tabs_div > li').on('click', function() {

    $("span").removeClass("active_bullet");
    $("span").addClass("tab_circle tab_toggler");
    if ($(this).find('span').hasClass('active_bullet')) {

      return;
    } else {
      $(this).find('span').removeClass('tab_circle tab_toggler');
      $(this).find('span').addClass('active_bullet');
    }


  });


  $('.next_btn').click(function() {
    $.each($('.tabs_div > li'), function() {
      $(this).find('a').find('span').removeClass('active_bullet');
      if ($(this).attr('class')) {

        $(this).find('a').find('span').addClass('active_bullet');
      }

    });

      var next = $('.tabs_div > .active').next('li');
      console.log(next)
      if(!next.length){
         next = $('.tabs_div > li:first-child');
      }

      next.find('a').trigger('click');

  });
});