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

【问题标题】：Button for toggle tabs skips first tab切换选项卡的按钮跳过第一个选项卡
【发布时间】：2018-07-03 09:10:19
【问题描述】：

我有由 2 种按钮控制的选项卡：

  1. 常规 BootStrap 选项卡按钮 - (ul li) - 左侧的紫色圆形按钮 - 我们称它们为“侧边栏按钮”。

  2. 用于按顺序切换选项卡的外部按钮（从第一个到最后一个并返回 - 从最后一个到第一个） - 在选项卡下 - 我们称之为“切换按钮”。

问题是这样的：

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

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

【问题讨论】：

    标签： jquery html twitter-bootstrap tabs


    【解决方案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');

  });
});

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2021-11-28
      • 1970-01-01
      • 2021-10-26
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode