如何聚焦/显示'选项卡窗格'如果使用jquery的bootstrap选项卡上的选项卡字段为空
How focus/show a 'tab-pane' if tab field empty on bootstrap tab using jquery?
我试图显示一个选项卡窗格，其中Bootstrap选项卡上的字段为空。这是我的HTML:
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<form method="POST" id="frmUser">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">First Name</label>
<input type="text" name="mirst_name" class="form-control">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">Middle Name</label>
<input type="text" name="middle_name" class="form-control">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">Last Name</label>
<input type="text" name="last_name" class="form-control">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">Email Address</label>
<input type="text" name="email" class="form-control">
<button type="submit" class="btn btn-primary" name="save">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
在"提交最后一个选项卡""设置"中，检查所有选项卡字段是否为空，如果为空，则显示特定的选项卡。还可以将"导航选项卡"
DEMOjsfiddle
完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-2.1.4.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.min.css" >
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<form method="POST" id="frmUser">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">First Name</label>
<input type="text" name="mirst_name" class="form-control">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">Middle Name</label>
<input type="text" name="middle_name" class="form-control">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">Last Name</label>
<input type="text" name="last_name" class="form-control">
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<div class="panel panel-primary">
<div class="panel-body">
<label class="control-label">Email Address</label>
<input type="text" name="email" class="form-control">
<input type="button" class="btn btn-primary " name="save" value="submit"></button>
</div>
</div>
</div>
</div>
</form>
</div>
<script>
$('input[name=save]').on('click',function(){ alert('hi');
var tabs=$('.tab-pane input');
$('.nav.nav-tabs li').removeClass('active');
$('.tab-pane').removeClass('active');
var bool=false;
var bool=$.each(tabs,function(i,v){
if($(v).val().length<=0){
$('ul.nav li:eq('+i+')').addClass('active');
$(v).parent().parent().parent().addClass('active');
$(this).focus();
return false;
}
})
if(bool=true){window.location.href='http://google.com'}
});
</script>
</body>
</html>
脚本
$('input[name=save]').on('click',function(){
var tabs=$('.tab-pane input');
$('.nav.nav-tabs li').removeClass('active');
$('.tab-pane').removeClass('active');
var bool=false;
var bool=$.each(tabs,function(i,v){
if($(v).val().length<=0){
$('ul.nav li:eq('+i+')').addClass('active');
$(v).parent().parent().parent().addClass('active');
$(this).focus();
return false;
}
})
if(bool=true){window.location.href='http://google.com'}
});
//将按钮按钮更改为html输入，如下所示
html
<input type="button" class="btn btn-primary " name="save" value="submit"></button>
找到以下功能的jquery脚本
$(document).on('click','button[name="save"]',function(){
var tabs=$('.tab-pane input');
$('.nav.nav-tabs li,.tab-pane').removeClass('active');
var bool=false;
$.each(tabs,function(index,value){
if($(this).val().length<=0){
$('ul.nav li:eq('+index+')').addClass('active');
$('.tab-content .tab-pane:eq('+index+')').addClass('active');
$(this).focus();
return false;
}
});
return false;
});
演示链接：http://jsfiddle.net/asimshahiddIT/p7n9vdon/
相关文章：
- 按照选项卡索引的顺序循环一个jQuery选择
- 如何在使用selectBoxIt JQuery插件时检测选项更改
- JQuery覆盖不更改单选选项
- jQuery动态表单显示在select选项上
- Jquery:如何获取所选选项全文(带空格）
- 使用基于文本的 Jquery 选择选项
- 如果类不是一个选项，如何在使用 jQuery 时控制(避免）嵌套 html 元素的样式
- 使用纯javascript而非jquery使所选选项卡处于活动状态并保持非活动状态
- 阻止选项卡缓存jquery ui
- 使用Jquery增加选项卡
- 如何在jquery.easytabs.js中获取当前选项卡
- JQuery-停止手风琴链接关闭所有选项卡
- 设置所选选项JQuery
- 防止已选择的选项 Jquery 使用 MYSQL 自动完成
- 动态替换下拉菜单选项jQuery
- 在Chrome和Firefox中选择选项jquery 2.1.1时出错
- 附加逗号分隔的值以选择选项 jQuery
- 忽略选择选项jQuery的值
- 无法在回调时配置选项(jQuery插件）
- 为什么这个自动选择第一个选项jquery脚本在Internet Explorer中不起作用
