如何关闭AngularJS中的活动选项卡

How do I turn off active tabs in AngularJS?

本文关键字：活动 选项 何关闭 AngularJS      更新时间：2023-09-26

我的选项卡工作得很好，但当我再次单击同一个选项卡时，我不知道如何关闭它们。正如你所看到的，我可以将鼠标悬停在选项卡上并点击它们，但我不能重新点击以关闭它们。

额外的想法-我也希望能够悬停在他们身上，并预览信息！！

app.js-

app.controller("TabController", function() {
    this.tab = 0;
    this.isSet = function(checkTab) {
      return this.tab === checkTab;
    };
    this.setTab = function(setTab) {
      this.tab = setTab;
    };
  });

index.html-

<span class="pull-right" ng-controller="TabController as tab">
          <ul class="nav nav-pills">
            <li ng-class="{ active:tab.isSet(1) }">
              <a href="" ng-click="tab.setTab(1)">News</a>
            </li>
            <li ng-class="{ active:tab.isSet(2) }">
              <a href="" ng-click="tab.setTab(2)">Scores</a>
            </li>
            <li ng-class="{ active:tab.isSet(3) }">
              <a href="" ng-click="tab.setTab(3)">Alternate Sites</a>
            </li>
          </ul>
          <div ng-show="tab.isSet(1)">
            {{site.news}}
          </div>
          <div ng-show="tab.isSet(2)">
            <blockquote>Governance - {{site.goverance}} | Environment - {{site.environment}} | Community - {{site.community}}</blockquote>
            Powered by CSRhub
          </div>
          <div ng-show="tab.isSet(3)">
            <section ng-show="site.alternatives.length">
              <ul class="list-inline thumbs">{{site.alternatives}}</ul>
            </section>
          </div>
        </span>
        </span>

我认为您想要做的是：

app.controller("TabController", function() {
    this.tab = 0;
    this.isSet = function(checkTab) {
      return this.tab === checkTab;
    };
    this.setTab = function(setTab) {
      if(setTab==this.tab)
          this.tab=-1
      else
          this.tab = setTab;
    };
  });
相关文章：