Javascript 带按钮的下一个选项卡
你好，我有身体形式的HTML代码Javascript 带按钮的下一个选项卡,javascript,jquery,html,Javascript,Jquery,Html,你好，我有身体形式的HTML代码 <body> <div id="page-content" class="header-clear"> <div id="page-content-scroll"><!--Enables this element to be scrolled --> <div class="content padding-content-tab">
<body>
<div id="page-content" class="header-clear">
<div id="page-content-scroll"><!--Enables this element to be scrolled -->
<div class="content padding-content-tab">
<div id="test-tab">
<div class="row">
<ul class="tabs padding-tab">
<div class="col-xs-4 orange-tab current text-center" data-tab="tabs-1">
<li class="tab-link" ><a href="#tabs-1">Step 1</a></li>
</div>
<div class="col-xs-4 orange-tab text-center" data-tab="tabs-2">
<li class="tab-link" ><a href="#tabs-2">Step 2</a></li>
</div>
<div class="col-xs-4 orange-tab text-center" data-tab="tabs-3">
<li class="tab-link" ><a href="#tabs-3">Step 3</a></li>
</div>
</ul>
</div>
<div id="tabs-1" class="tab-content current">
<div class="tab-elements">
<div class="text-center">
<button id="next_button" name="next_button" class="next-button">Next</button>
</div>
</div>
</div>
<div id="tabs-2" class="tab-content">
<div class="tab-elements">
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div id="tabs-3" class="tab-content">
<div class="tab-elements">
a commodo consequat.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
$(function(){
$('#nexttab').click(function(e){
e.preventDefault();
$('#mytabs a[href="#second"]').tab('show');
})
})
</script>
<div class="container">
<!-- Nav tabs -->
<ul id="mytabs" class="nav nav-tabs" role="tablist">
<li class="active">
<a href="#first" role="tab" data-toggle="tab">
<icon class="fa fa-home"></icon> Step 1
</a>
</li>
<li><a href="#second" role="tab" data-toggle="tab">
<i class="fa fa-user"></i> Step 2
</a>
</li>
<li>
<a href="#third" role="tab" data-toggle="tab">
<i class="fa fa-envelope"></i> Step 3
</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade active in" id="first">
<h2>First tab</h2>
<button type="button" id="nexttab" class="btn btn-primary">Set second tab</button>
</div>
<div class="tab-pane fade" id="second">
<h2>Second tab</h2>
<p> dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="tab-pane fade" id="third">
<h2>Third tab</h2>
<p> a commodo consequat.</p>
</div>
</div>
</div>
$（函数（）{
$（'#nexttab'）。单击（函数（e）{
e、 预防默认值（）；
$（'#mytabs a[href=“#second”]'）。tab（'show'）；
})
})
第一选项卡
设置第二个选项卡
第二选项卡
多洛雷·麦格纳·阿利夸。我们在维尼亚姆岛上吃了一顿饭
nostrud实习ullamco laboris nisi ut aliquip ex ea commodo consequat
第三选项卡
便笺
查找当前所选选项卡，该选项卡的类为当前，然后查找行中的下一个选项卡，如下所示
$(document).ready(function() {
$('#next_button').click(function() {
//first find the current selected tab and find next tab in the line as follows,
var nextTab = $('ul.tabs div.orange-tab.current').next();
//remove selected from current / all
$('ul.tabs div.orange-tab').removeClass('current');
$('div.tab-content').removeClass('current');
//set it as selected
nextTab.addClass('current');
//to show the content
$('div[id='+nextTab.data('tab')+']').addClass('current');
// or this should to work
//$('div[id='+nextTab.attr('data-tab')+']').addClass('current');
});
});
使用以下代码，您可以添加选项卡并持续单击以更改选项卡：
javascript:
$('#next_button').click(function(e){
var tab_id = Number($(e.target).closest('div.tab-content').attr('data-id'));
var currentTabId = Number($('ul.tabs div.orange-tab.current').attr('data-tabid'));
var tabAmount = $('ul.tabs div.orange-tab').length;
var nextTabId = (currentTabId == tabAmount ? 1 : currentTabId +1);
$('ul.tabs div.orange-tab').fadeOut().removeClass('current');
$('div.tab-content').fadeOut().removeClass('current');
$('ul.tabs div.orange-tab[data-tabid="' + nextTabId + '"]').addClass('current').fadeIn();
$('div[data-id="' + nextTabId + '"]').addClass('current').fadeIn();
});
html:
Lorem ipsum dolor sit amet
多洛雷·麦格纳·阿利夸。我们在维尼亚姆岛上吃了一顿饭
nostrud实习ullamco laboris nisi ut aliquip ex ea commodo consequat。
便笺。
下一个
元素应指向下一个元素。这是密码
enter code here $('#next_button').click(function() {
var tab_id = $('ul.tabs .orange-tab.current').attr('data-tab');
var first = $('ul.tabs .orange-tab:first').attr('data-tab');
$current = $('ul.tabs div.orange-tab.current').removeClass('current').next();
$currentTabContent = $('#' + tab_id).removeClass('current').next();
if ($current.length) {
$current.addClass('current');
$currentTabContent.addClass('current');
} else {
$('ul.tabs div.orange-tab:first').addClass('current');
$("#" + first).addClass('current');
}
}))
工作fiddle[a link]（）你能在代码部署的地方发布一个JSFIDLE或url吗嗯..我不知道为什么，但它会删除我的所有选项卡..而不转到下一个选项卡..：（它与选项卡一起工作..但是现在与内容一起..它没有显示..这里的内容非常完美！但是现在我尝试在选项卡2上放置相同的按钮…在选项卡3上进行更改..但是这里不会work@Whicas69这是一个全新的问题。但是按钮应该不在任何选项卡中。根据按钮，单击“更改选项卡”。@whichas69则需要添加按钮具有唯一id的ons，并添加要转到下一个的事件和处理程序。通常，“下一步”按钮应保留在选项卡之外，以切换到下一步。上一步也是如此。
<div id="page-content" class="header-clear">
<div id="page-content-scroll"><!--Enables this element to be scrolled -->
<div class="content padding-content-tab">
<div id="test-tab">
<div class="row">
<ul class="tabs padding-tab">
<div style="display:block;" class="col-xs-4 orange-tab text-center current" data-tabid="1">
<li class="tab-link" ><a href="#tabs-1">Step 1</a></li>
</div>
<div style="display:none;" class="col-xs-4 orange-tab text-center" data-tabid="2">
<li class="tab-link" ><a href="#tabs-2">Step 2</a></li>
</div>
<div style="display:none;" class="col-xs-4 orange-tab text-center" data-tabid="3">
<li class="tab-link" ><a href="#tabs-3">Step 3</a></li>
</div>
</ul>
</div>
<div style="display:block;" data-id="1" class="tab-content current">
<div class="tab-elements">
Lorem ipsum dolor sit amet
</div>
</div>
<div style="display:none;" data-id="2" class="tab-content">
<div class="tab-elements">
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
<div style="display:none;" data-id="3" class="tab-content">
<div class="tab-elements">
a commodo consequat.
</div>
</div>
<div class="text-center">
<button id="next_button" name="next_button" class="next-button">Next</button>
</div>
</div>
</div>
</div>
</div>
</div>
enter code here $('#next_button').click(function() {
var tab_id = $('ul.tabs .orange-tab.current').attr('data-tab');
var first = $('ul.tabs .orange-tab:first').attr('data-tab');
$current = $('ul.tabs div.orange-tab.current').removeClass('current').next();
$currentTabContent = $('#' + tab_id).removeClass('current').next();
if ($current.length) {
$current.addClass('current');
$currentTabContent.addClass('current');
} else {
$('ul.tabs div.orange-tab:first').addClass('current');
$("#" + first).addClass('current');
}