如果单击，则提供活动类，直到单击另一个元素，然后为第二个元素提供活动类并从第一个元素中删除活动类答案

【问题标题】：If clicked, give active class until another element is clicked, then give the second element active class and remove the active class from the first如果单击，则提供活动类，直到单击另一个元素，然后为第二个元素提供活动类并从第一个元素中删除活动类
【发布时间】：2019-08-13 16:51:39
【问题描述】：

我试图在单击的小部件磁贴上保持类“活动”，直到单击它的另一个同级（不管页面上的任何其他单击操作）。这在小部件中有效，但如果用户单击页面上的另一个元素，则活动状态将被删除。我怎样才能防止这种情况发生？

在瓷砖上：<div ng-click="tile.clickButton(0)"> 我尝试过：

ng-class="clickButton ? 'active' : '' "

和

ng-class="{'active' : clickButton = true}"

和

ng-class="showRespectiveEvent ? 'active' : '' "

（showRespectiveEvent 导致 ng-include 启动页面上另一个小部件的可见性）

我也试过了：

adding and removing classes in angularJs using ng-click

How to add many functions in ONE ng-click?

How to set active class on ng-click?

和许多其他解决方案，但似乎没有任何工作......

要在页面上显示的小部件代码（出于隐私考虑非常简化）：

<div>
   <div>
       <ng-include src="'Widget Tile Page'"></ng-include>
   </div>

<!-- This is the widget that the tiles hide/show when clicked -->
   <div class="row">
        <div ng-if="thisPageCtrl.showRespectiveEvent"></div>
   </div>
</div>

// Code for Tile Widget Page:

<div ng-controller="tile as wtl">
    <div class="row>
       <div class="tile" ng-click="wtl.clickButton(0)">
          <div>{{wtl.someButtons[0].title}}</div>
          <div>{{wtl.someButtons[0].data}}</div>
       </div>
    </div>
</div>

<script>
$scope.clickButton = clickButton 

function clickButton(iIndex) {
        var btn = $scope.someButtons[iIndex];
        $rootScope.$emit("highLight", btn);
    }
</script>    

// CSS:

.tile {
color: purple;
border: 1px solid purple;
}

.tile.active {
font-weight: 900;
color: deeppink;
border: 1px solid deeppink
}

除非单击小部件中的另一个图块，否则我希望活动类保持不变。如果用户单击页面上的另一个元素，则活动类将被删除。

【问题讨论】：

您能否编辑您的问题以显示wtl.clickButton(0) 的实际作用？这个函数是什么样子的？
好的，我添加了wtl.clickButton的功能。感谢您的观看！
<div class="row> 中缺少的 " 也会导致问题
谢谢KMims，这只是一个例子。实际代码中缺少引号。

标签： html css angularjs

【解决方案1】：

希望这能让你朝着正确的方向前进：

(function() {
  var app = angular.module('tileApp', []);

  app.controller('TileController', function() {
    this.activeTile = null;
    this.someButtons = [{
      title: 'title1',
      data: 'data1',
    }, {
      title: 'title2',
      data: 'data2',
    }, {
      title: 'title3',
      data: 'data3',
    }];;

    this.clickButton = function(index) {
      this.activeTile = index;
    }
  });
})();

.tileContainer {
   display: grid;
   gap: 20px;
   grid-template-columns: repeat(3, 1fr);
}

.tile {
   color: purple;
   border: 1px solid purple;
   padding: 20px;
   cursor: pointer;
}

.tile.active {
  font-weight: 900;
  color: deeppink;
  border: 1px solid deeppink;
  background: pink;
}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  </head>
  <body ng-app="tileApp">
    <center><h1>Active Tile</h1></center>
    <div class="tileContainer" ng-controller="TileController as tile">
        <div class="tile" ng-click="tile.clickButton($index)" ng-repeat="button in tile.someButtons" ng-class="tile.activeTile === $index ? 'active' : ''">
           <div>{{button.title}}</div>
           <div>{{button.data}}</div>
        </div>
      </div>
  </body>
</html>

【讨论】：