我需要在点击封闭div时将我的锚元素的颜色从黑色更改为白色。 代码:
$(document).ready(function() {
$(".settings-list-container").click(function() {
$(".functionHyperlink").css("background-color", "red");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="settings-container" ng-controller="settingController">
<div id="settings-list">
<div class="settings-list-container" ng-repeat="element in elements" ng-click="openTab(element,$event);" target="_self">
<a href="" class="functionHyperlink" target="_self">{{element.caption}} </a>
</div>
</div>
<div id="settings-list-content" ng-include="tabV.view">
</div>
</div>
答案 0 :(得分:1)
要实现此目的,您可以使用toggleClass()
添加/删除应用于.settings-list-container
元素的预定义CSS规则。然后可以将此类设置为影响子.functionHyperlink
元素,如下所示:
$(document).ready(function() {
$(".settings-list-container").click(function() {
$(this).toggleClass('active');
});
});
&#13;
.functionHyperlink {
color: #000;
}
.settings-list-container.active .functionHyperlink {
background-color: #F00;
color: #FFF;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="settings-container" ng-controller="settingController">
<div id="settings-list">
<div class="settings-list-container" ng-repeat="element in elements" ng-click="openTab(element,$event);" target="_self">
<a href="" class="functionHyperlink" target="_self">{{element.caption}} </a>
</div>
</div>
<div id="settings-list-content" ng-include="tabV.view"></div>
</div>
&#13;
如果您只想添加一次颜色,请将toggleClass()
更改为addClass()
。
答案 1 :(得分:0)
一种可能性是使用angular.element()和css选择器
angular.element('.functionHyperlink').css('color', '#fff');
答案 2 :(得分:0)
如果我理解正确,您只想在点击时实现颜色变化。你可以尝试使用这样的纯CSS。
.settings-list-container:active .functionHyperlink {
color: white;
}
或者您可以通过jQuery并在单击div时添加一个类:
$(document).ready(function() {
"use strict";
$('.settings-list-container').each(function() {
$(this).bind('mousedown', function() {
$(this).find('.functionHyperlink').addClass('inverted');
}).bind('mouseup', function() {
$(this).find('.functionHyperlink').removeClass('inverted');
});
});
});
.functionHyperlink.inverted {
color: white;
}
如果您希望元素保持反转,请改用以下jQuery。
$(document).ready(function() {
"use strict";
$('.settings-list-container').each(function() {
$(this).click(function(e) {
e.preventDefault();
$(this).find('.functionHyperlink').toggleClass('inverted');
});
});
});