html - 如果单击,则赋予 active 类直到单击另一个元素,然后赋予第二个元素 active 类并从第一个元素中删除 active 类

标签 html css angularjs

我试图让类在被点击的小部件图 block 上保持“事件”状态,直到它的另一个兄弟被点击(不管页面上的任何其他点击操作)。这在小部件内有效,但如果用户单击页面上的另一个元素,则事件状态将被删除。我怎样才能避免这种情况?

在磁贴上:<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
}

我希望事件类保持不变,除非单击小部件中的另一个图 block 。如果用户点击页面上的另一个元素,事件类将被删除。

最佳答案

希望这能让您朝着正确的方向前进:

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

关于html - 如果单击,则赋予 active 类直到单击另一个元素,然后赋予第二个元素 active 类并从第一个元素中删除 active 类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57482181/

相关文章:

html - 大型绝对定位 div 是否昂贵?

javascript - 如何在 Javascript/HTML5 中解析 Excel (XLS) 文件

javascript - 如何使用最接近js的选择器

css - Chrome/Safari/Webkit 上的额外填充——有什么想法吗?

javascript - AngularJS - 对象上的 ng-repeat

AngularJS:重新加载 subview

javascript - 如何反转两个输入选择之间的选项值?

html - 无法将我的福利等级移到右边

html - 使用 row_number CSS 后为 RTL 内容添加填充

javascript - 如何在 Cordova/Ionic 中的特定坐标中存储项目/图像?