以下是一个使用AngularJS实现该功能的示例代码:
HTML代码:
Card {{$index+1}}
CSS代码:
.highlight {
background-color: yellow;
}
JavaScript代码:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.cards = [1, 2, 3, 4, 5]; // 假设有5个卡片
$scope.selectedCard = null; // 初始化选中的卡片为空
$scope.highlightCard = function(event) {
var card = angular.element(event.target);
$scope.selectedCard = card.text(); // 将选中的卡片保存在selectedCard变量中
};
});
在上述代码中,我们使用ng-repeat指令来循环遍历卡片数组,并使用ng-click指令来绑定点击事件。当点击卡片时,highlightCard函数会被调用,并将点击的卡片保存在selectedCard变量中。同时,我们使用ng-class指令来根据selectedCard的值给卡片添加highlight类,从而实现高亮效果。
当选择另一个卡片时,由于selectedCard的值被更新,之前选中的卡片会自动取消高亮。
请注意,上述代码仅为示例,具体实现方式可能因项目要求而有所不同。