Question

我正在开发一个基于angularjs的页面。我正在使用一个页面的bootstrap的tabset功能。我可以使用tab（）jquery函数用于水平制表符但是我使用了垂直制表符来表示我的页面。一个外观风格的页面。

<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>

我需要的是当我点击“保存和放大”时更改激活第二个标签当我点击第二个选项卡上的“保存和下一个”按钮时，第一个选项卡上的下一个按钮......和第三个选项卡。有什么简单的方法可以完成它吗？

Answer 1

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

Answer 2

<强> 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;
}

如何在angularjs中点击按钮点击活动标签？

2 个答案: