我正在尝试通过单击“保存并继续”之类的按钮移动到下一个选项卡。我想创建一个按钮以移动到下一个选项卡。每个选项卡都包含一些文本框。
当用户填写选项卡1的最后一个文本框并单击“保存并继续”按钮时，我想显示tab2。当用户到达tab3时，我想隐藏“保存并继续”按钮。
如何解决这个问题？
Html代码
<ul class="nav nav-tabs col-xs-offset-2 col-md-offset-2 ">
<li class="active"><a href="#info-tab" data-toggle="tab">Information <i class="tabs"></i></a></li>
<li ><a href="#personalinfo-tab" data-toggle="tab">Personal Information <i class="tabs"></i></a></li>
<li><a href="#address-tab" data-toggle="tab">Address <i class="tabs"></i></a></li>
</ul>
<div class="margintop"></div>
<form name="userForm" class="signin form-horizontal col-xs-offset-2 col-md-offset-0" novalidate autocomplete="off">
<div class="tab-content">
<div class="tab-pane active" id="info-tab">
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="firstName">First Name:</label>
<div class="col-xs-7">
<input type="text" required id="firstName" name="firstName" class="form-control" id="firstName" data-ng-model="credentials.firstName" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="lastName">Last Name:</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="lastName" class="form-control" data-ng-model="credentials.lastName" id="lastName" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="inputEmail">Email:</label>
<div class="col-xs-7">
<input type="email" class="form-control"name="email" class="form-control" data-ng-model="credentials.email" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="lastName">User Name:</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="username" class="form-control" data-ng-model="credentials.username" id="userName" placeholder="User Name">
</div>
</div>
</div>
<div class="tab-pane" id="personalinfo-tab">
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="gender">Gender:</label>
<div class="col-xs-6">
<input type="radio" ng-model="credentials.gender" value="Male" />Male
<input type="radio" ng-model="credentials.gender" value="Female" />Female
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="designation">Designation:</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="designation" class="form-control" data-ng-model="credentials.designation" id="designation" placeholder="Enter Designation">
</div>
</div>
</div>
<div class="tab-pane" id="address-tab">
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="mobile">Mobile No:</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="mobile" class="form-control" data-ng-model="credentials.mobile" id="mobile" placeholder="Enter Mobile No">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="address">Address:</label>
<div class="col-xs-7">
<textarea rows="4" cols="50" class="form-control"name="address" class="form-control" data-ng-model="credentials.address" id="address" placeholder="Enter Address"></textarea>
</div>
</div>
<div style="margin: 15px">
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8 ">
<input type="submit" class="btn btn-primary" data-ng-click="adduser()" value="Create New Associate">
</div>
</div>
<div data-ng-show="error" class="text-center text-danger">
<strong data-ng-bind="error"></strong>
</div>
</div>
</div>
</div>
<button class="btn btn-small" ng-click="proceed()">save and continue</button>
</form>
</div>
Javascript代码
$scope.proceed = function() {
};
答案 0 :(得分：1)
谢谢，我通过使用“href”基于“id”和脚本移动到下一个标签来摆脱这个问题..这是我的html文件。
我的html文件：
<ul class="nav nav-tabs col-xs-offset-2 col-md-offset-2">
<li class="active"><a href="#info-tab" data-toggle="tab">Information <i class="fa"></i></a></li>
<li ><a href="#personalinfo-tab" data-toggle="tab">Personal Information <i class="fa"></i></a></li>
<li><a href="#address-tab" data-toggle="tab">Address <i class="fa"></i></a></li>
</ul>
<div class="margintop"></div>
<!-- <form class="form-horizontal">-->
<form id="accountForm" name="userForm" data-ng-submit="adduser()" class="signin form-horizontal col-xs-offset-2 col-md-offset-0" novalidate autocomplete="off">
<div class="tab-content">
<div class="tab-pane active" id="info-tab">
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="firstName">First Name:</label>
<div class="col-xs-7">
<input type="text" required id="firstName" name="firstName" class="form-control" id="firstName" data-ng-model="credentials.firstName" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="lastName">Last Name:</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="lastName" class="form-control" data-ng-model="credentials.lastName" id="lastName" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="inputEmail">Email:</label>
<div class="col-xs-7">
<input type="email" class="form-control"name="email" class="form-control" data-ng-model="credentials.email" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="lastName">User Name:</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="username" class="form-control" data-ng-model="credentials.username" id="userName" placeholder="User Name">
</div>
</div>
<div style="margin: 15px">
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8 ">
<a style="margin: 15px" href="#personalinfo-tab" class="btn btn-primary nexttab" data-toggle="tab" id="btn-next">Save and Continue</a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="personalinfo-tab">
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="gender">Gender:</label>
<div class="col-xs-6">
<input type="radio" ng-model="credentials.gender" value="Male" />Male
<input type="radio" ng-model="credentials.gender" value="Female" />Female
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="designation">Designation:</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="designation" class="form-control" data-ng-model="credentials.designation" id="designation" placeholder="Enter Designation">
</div>
</div>
<div style="margin: 15px">
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8 ">
<a href="#address-tab" class="btn btn-primary nexttab" id="btn-next" data-toggle="tab">Save and Continue</a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="address-tab">
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="mobile">Mobile No:</label>
<div class="col-xs-7">
<input type="text" class="form-control" name="mobile" class="form-control" data-ng-model="credentials.mobile" id="mobile" placeholder="Enter Mobile No">
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3 col-md-3" for="address">Address:</label>
<div class="col-xs-7">
<textarea rows="4" cols="50" class="form-control"name="address" class="form-control" data-ng-model="credentials.address" id="address" placeholder="Enter Address"></textarea>
</div>
</div>
<div style="margin: 15px">
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8 ">
<input type="submit" class="btn btn-primary" value="Create New Associate">
</div>
</div>
<div data-ng-show="error" class="text-center text-danger">
<strong data-ng-bind="error"></strong>
</div>
</div>
</div>
</div>
</form>
我的脚本文件::通过单击按钮
移动到下一个选项卡<script type="text/javascript">
$('.nexttab').click(function(){
$('.nav-tabs > .active').next('li').find('a').trigger('click');
});
</script>
答案 1 :(得分：0)
我不知道这是否是最佳方式，但我们通过设置活动标志并设置选项卡列表来实现。如下所示。
<tab active="tabs.tab1"></tab>
<tab active="tabs.tab2"></tab>
<tab active="tabs.tab3"></tab>
$scope.tabs = {tab1:false,tab2:false,tab3:false};
$scope.buttonClick = function(button) { // button will be the name of the next tab to become active.
$scope.tabs[button] = true;
};