5
A
回答
3
这解决您的问题
$('.next-tab').click(function(e){
if($('.nav-tabs > .active').next('li').hasClass('next-tab')){
$('.nav-tabs > li').first('li').find('a').trigger('click');
}else{
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
e.preventDefault();
});
0
我最近需要这个功能,这就是我结束了:
$('.change-tab').click(function() {
var $this = $(this);
var $nav = $($this.data('target'))
var $tabs = $nav.find('li');
var $curTab = $tabs.filter('.active');
var cur = $tabs.index($curTab);
if ($this.data('direction') == 'next') var $showTab = cur == $tabs.length - 1 ? $tabs.eq(0).find('a') : $tabs.eq(cur + 1).find('a');
else var $showTab = cur == 0 ? $tabs.eq($tabs.length - 1).find('a') : $tabs.eq(cur - 1).find('a');
$showTab.tab('show');
});
// normal tabs code
$('#myTab a').click(function (e) {
\t e.preventDefault();
\t $(this).tab('show');
});
$(function() {
$('#myTab a:last').tab('show');
})
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a href="#home">Home</a>
</li>
<li><a href="#profile">Profile</a>
</li>
<li><a href="#messages">Messages</a>
</li>
<li><a href="#settings">Settings</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Home content...</div>
<div class="tab-pane" id="profile">Content here...</div>
<div class="tab-pane" id="messages">Messages...</div>
<div class="tab-pane" id="settings">Settings...</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="btn-toolbar pull-right">
<div class="btn-group">
<button class="btn btn-default change-tab" data-direction="previous" data-target="#myTab"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Last</button>
<button class="btn btn-default change-tab" data-direction="next" data-target="#myTab">Next <span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span>
</button>
</div>
</div>
</div>
</div>
0
我使用@ DelightedD0D提供解决方案。当页面加载时,控件始终停留在最后一个选项卡上。如果要解决这个问题,请更新以下功能
$(function() {
$('#myTab a:last').tab('show');
})
到
$(function() {
$('#myTab a:active').tab('show');
})
+0
通过使用@ DelightedD0D代码,如何在最后一个选项卡上停止它?并在第一个标签上点击最后一个按钮时阻止它回到最后一个标签?任何想法? –
相关问题
- 1. 显示测验的下一个按钮
- 2. Rails:will_paginate“显示下一个10”按钮?
- 3. Android引用应用程序,下一个和后退按钮
- 4. 添加“下一步”按钮,以显示下一个表实体
- 5. 点击一个按钮去Android中的下一个标签
- 6. 如何在按下按钮时突出显示一个按钮
- 7. 按钮点击显示下一个/上一个日期
- 8. Jquery PrettyPhoto - 如何总是显示下一个上一个按钮?
- 9. MPNowPlayingInfoCenter不显示上一个和下一个按钮
- 10. 如何在滑块中不显示上一个按钮和下一个按钮?
- 11. Twitter引导向导区分下一个按钮
- 12. 制作一个按钮,每次按下时都会创建一个新标签
- 13. 引导按钮组 - 下拉菜单和“显示”按钮
- 14. jquery步骤 - 想在最后一步显示下一个按钮
- 15. 显示与引导程序一致的按钮
- 16. 单击下一个按钮时如何逐个显示图像?
- 17. 上一个和下一个按钮
- 18. UIScrollView下一个上一个按钮
- 19. 移至下一个按钮
- 20. MPMoviePlayerController和下一个按钮
- 21. 如何在按下按钮时显示另一个布局?
- 22. 当按钮按下时显示一个ViewController,而TabBar也存在
- 23. 显示何时按下了一个按钮Qt
- 24. bootstrap 3对齐按钮组在下拉按钮下面有一个微小间隙,而在导航标签内
- 25. TableView中没有显示在按一下按钮在iPhone应用程序
- 26. 下一个和上一个按钮像iPhone中的邮件应用程序
- 27. 有一个按钮减去我按下的下一个按钮的值。 Swift
- 28. 上提交点击按钮启用下一个标签?
- 29. 我的第一个gwt应用程序不显示按钮
- 30. 如何通过单击“下一步”按钮来显示下一个图像
标签是不能点击这里了。 – herrh
@herrh我没有在我的示例中包含常规选项卡代码,对不起。我上面添加了它,所以你可以看到它使用正常的使用 – DelightedD0D
感谢解决方案 – herrh