切换选项卡的按钮跳过第一个选项卡
Posted
技术标签:
【中文标题】切换选项卡的按钮跳过第一个选项卡【英文标题】：Button for toggle tabs skips first tab 【发布时间】：2018-07-03 09:10:19 【问题描述】：我有由 2 种按钮控制的选项卡：
常规 BootStrap 选项卡按钮 - (ul li) - 左侧的紫色圆形按钮 - 我们称它们为“侧边栏按钮”。
用于按顺序切换选项卡的外部按钮（从第一个到最后一个并返回 - 从最后一个到第一个） - 在选项卡下 - 我们称之为“切换按钮”。
问题是这样的：
单击“切换”按钮时 - 选项卡按其降序导航，正如它们应有的那样。 但是，当切换到达最后一个选项卡时 - 它应该返回到第一个选项卡 - 但它不会 - 它“跳过”该选项卡，然后再单击一次，然后传递到第二个选项卡.... 我检查了所有负责触发选项卡的类 - 看起来很好....
/**
* 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>【问题讨论】：
【参考方案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');
);
);
【讨论】：
以上是关于切换选项卡的按钮跳过第一个选项卡的主要内容，如果未能解决你的问题，请参考以下文章
如何从另一个选项卡上的场景切换或弹出选项卡式应用程序中第一个选项卡的第二个场景？