我创建了带有下一个和上一个按钮功能的标签内容。但是下一个和上一个按钮功能不起作用。我使用了jquery.min.js版本1.11.1版本。我已经创建了如下代码段。我已经提到this question并创建了答案中提到的功能。但它还是不起作用。
$("ul.kyc-tab-list li a").click(function () {
$("ul.kyc-tab-list li a").removeClass("active");
$(this).addClass("active");
});
$(".tab-btn1").click(function () {
$("#tab1").show();
$("#tab2").hide();
$("#tab3").hide();
$("#tab4").hide();
$("#tab5").hide();
});
$(".tab-btn2").click(function () {
$("#tab1").hide();
$("#tab2").show();
$("#tab3").hide();
$("#tab4").hide();
$("#tab5").hide();
});
$(".tab-btn3").click(function () {
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").show();
$("#tab4").hide();
$("#tab5").hide();
});
$(".tab-btn4").click(function () {
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").hide();
$("#tab4").show();
$("#tab5").hide();
});
$(".tab-btn5").click(function () {
$("#tab1").hide();
$("#tab2").hide();
$("#tab3").hide();
$("#tab4").hide();
$("#tab5").show();
});
$('#btnNext').click(function () {
// get current tab
var currentTab = $(".tab.active");
// get the next tab, if there is one
var newTab = currentTab.next();
// at the end, so go to the first one
if (newTab.length === 0) {
newTab = $(".tab").first();
}
currentTab.removeClass('active');
// add active to new tab
newTab.addClass('active');
});
$('#btnPrevious').click(function () {
// get current tab
var currentTab = $(".tab.active");
// get the previous tab, if there is one
var newTab = currentTab.prev();
// at the start, so go to the last one
if (newTab.length === 0) {
newTab = $(".tab").last();
}
currentTab.removeClass('active');
// add active to new tab
newTab.addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<section>
<div class="kyc-tab-wrapper">
<ul class="kyc-tab-list">
<li>
<a href="javascript:void(0);" class="tab active tab-btn1"><span>01</span>Customer</a>
</li>
<li>
<a href="javascript:void(0);" class="tab tab-btn2"><span>02</span>Contact / Promotors</a>
</li>
<li>
<a href="javascript:void(0);" class="tab tab-btn3"><span>03</span>Bank / Business</a>
</li>
<li>
<a href="javascript:void(0);" class="tab tab-btn4"><span>04</span>Other</a>
</li>
<li>
<a href="javascript:void(0);" class="tab tab-btn5"><span>05</span>Finish</a>
</li>
</ul>
<div class="kyc-tab-content" id="tab1">
tab 1
</div>
<div class="kyc-tab-content" id="tab2">
tab 2
</div>
</div>
<div class="kyc-tab-content" id="tab3">
tab 3
</div>
<div class="kyc-tab-content" id="tab4">
tab 4
</div>
<div class="kyc-tab-content" id="tab5">
tab 5</div>
<div class="kyc-tab-form-btn-wrap">
<button id="btnPrevious" style="display:none"> Previous</button>
<button id="btnNext">Next </button>
</div>
</div>
</div>
</section>
</div>
答案 0 :(得分:2)
要使Next
按钮起作用,请更改以下行。
// get current tab
var currentTab = $(".tab.active").closest("li");
//get the next tab, if there is one
var newTab = currentTab.next().find("a.tab");
//...
currentTab.find(".tab").removeClass('active');
对Prev
按钮也进行类似的更改。
// get current tab
var currentTab = $(".tab.active").closest("li");
// get the previous tab, if there is one
var newTab = currentTab.prev().find("a.tab");
//...
currentTab.find(".tab").removeClass('active');
<强> Fiddle Demo 强>
您的代码中的问题是您没有正确关注下一个或上一个a
标记。
答案 1 :(得分:1)
所以这些是我对你的代码所做的改变:
首先,kyc-tab-wrapper
的结束标记在 tab2
之后关闭 - 修正了。
您可以将其包含在第一个侦听器中,而不是让多个侦听器切换选项卡:
$(".kyc-tab-content").hide();
$($(this).attr('class').split(' ').find(function(e) {
return e.startsWith('tab-btn');
}).replace('tab-btn', '#tab')).show();
next 和之前的按钮无法正常运行prev
和next
a
- 你应该用li
来做,因为li
是兄弟姐妹:
currentTab.closest('li').prev().find('a');
currentTab.closest('li').next().find('a');
您可以触发点击标签,而不是再次登录。
同时添加初始触发器,以便在使用$(".tab.active").trigger('click')
见下面的演示:
$("ul.kyc-tab-list li a").click(function() {
$("ul.kyc-tab-list li a").removeClass("active");
$(this).addClass("active");
/* Do this instead of multiple listeners */
$(".kyc-tab-content").hide();
$($(this).attr('class').split(' ').find(function(e) {
return e.startsWith('tab-btn');
}).replace('tab-btn', '#tab')).show();
});
// active tab load initially
$(".tab.active").trigger('click');
$('#btnNext').click(function() {
var currentTab = $(".tab.active");
var newTab = currentTab.closest('li').next().find('a');
if (newTab.length === 0) {
newTab = $(".tab").first();
}
newTab.trigger('click');
});
$('#btnPrevious').click(function() {
var currentTab = $(".tab.active");
var newTab = currentTab.closest('li').prev().find('a');
if (newTab.length === 0) {
newTab = $(".tab").last();
}
newTab.trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<section>
<div class="kyc-tab-wrapper">
<ul class="kyc-tab-list">
<li>
<a href="javascript:void(0);" class="tab active tab-btn1"><span>01</span>Customer</a>
</li>
<li>
<a href="javascript:void(0);" class="tab tab-btn2"><span>02</span>Contact / Promotors</a>
</li>
<li>
<a href="javascript:void(0);" class="tab tab-btn3"><span>03</span>Bank / Business</a>
</li>
<li>
<a href="javascript:void(0);" class="tab tab-btn4"><span>04</span>Other</a>
</li>
<li>
<a href="javascript:void(0);" class="tab tab-btn5"><span>05</span>Finish</a>
</li>
</ul>
<div class="kyc-tab-content" id="tab1">tab 1</div>
<div class="kyc-tab-content" id="tab2">tab 2</div>
<div class="kyc-tab-content" id="tab3">tab 3</div>
<div class="kyc-tab-content" id="tab4">tab 4</div>
<div class="kyc-tab-content" id="tab5">tab 5</div>
<div class="kyc-tab-form-btn-wrap">
<button id="btnPrevious"> Previous</button>
<button id="btnNext">Next </button>
</div>
</div>
</section>
</div>