如何更改angularjs中单击按钮的活动选项卡

How to change active tab on button click in angularjs?

本文关键字：活动 选项 按钮 单击 何更改 angularjs      更新时间：2023-09-26

我正在开发一个基于angularjs的页面。我正在为一个页面使用引导程序的选项卡集功能。我本可以将tabs（）jquery函数用于水平选项卡，但我的页面使用的是垂直选项卡集。这是一个outlook样式的页面。

<div class="white-bg animated fadeIn">
<div class="row s-t-xs">
    <div class="col-xs-10">
        <div class="tabs-container">
                <tabset class="tabs-left">
                    <tab id="tab1" heading="Job Preferences">
                    //TAB1 Content
                     <div class="form-group">
                     <div class="col-md-10 col-sm-offset-9">
          <button class="btn btn-primary" type="submit" id="button1">Save &amp; Next</button>
                     </div>
                     </div>
                    </tab>
                    <tab id="tab2" heading="Experience / Project Summary" >
                    //TAB2 Content
                    <div class="form-group">
                    <div class="col-md-10 col-sm-offset-9">
          <button class="btn btn-primary" type="submit" id="button2">Save &amp; Next</button>
                    </div>
                    </div>
                    </tab>

                    <tab id="tab3" heading="Educations / Certifications / Awards">
                   //TAB3 Content
                     <div class="form-group">
                     <div class="col-md-10 col-sm-offset-9">
          <button class="btn btn-primary" type="submit" id="button3">Finish</button>
                     </div>
                     </div>
                    </tab>
                </tabset>
        </div>
    </div>
</div>

我需要的是更改激活第二个标签，当我点击‘保存&第一个选项卡上的"下一步"按钮。以及当我单击第二个选项卡上"保存和下一个"按钮时将激活的第三个选项卡。有什么简单的方法可以做到吗？

您可以尝试这种简单的方法。角度uihttp://angular-ui.github.io/bootstrap/#/tabs

HTML:

<tabset>
 <tab heading="First" ng-attr-active="firtTab">Content1</tab>
 <tab heading="Second" ng-attr-active="secondTab">Content2</tab>
</tabset>

控制器：

$scope.firstTab = true;
$scope.secondTab = false;
$scope.next= function(){
$scope.firstTab = false;
$scope.secondTab = true;
}
相关文章：