javascript - 如何使用 Javascript/JQuery 修复我的 CSS 链接属性 onClick?
问题描述
我试图在单击链接后更改链接的颜色,然后在单击另一个链接时将其设置回原始颜色。为此,我想设置一个“活动”类,然后在单击另一个链接时将其删除。
如何修复我的代码以使其正常运行?
$(function() {
var links = $('a.link').click(function() {
links.removeClass('active');
$(this).addClass('active');
});
});
a.link.active {
background-color: #000033;
color: #FFFFCC;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li>Hyper Links</li>
<li>
<a href="#" class="link">Link</a>
</li>
<li>
<a href="#" class="link">Link</a>
</li>
<li>
<a href="#" class="link">Link</a>
</li>
<li>
<a href="#" class="link">Link</a>
<li>
<a href="#" class="link">Link</a>
</li>
</ul>
解决方案
尝试这个:
enter code here
<script>
$(function() {
var links = $('a.link');
$(document).on('click','a.link',function(e){
links.removeClass('active');
$(this).addClass('active');
})
});
</script>
推荐阅读
- c# - BLE advert -- 获取设备显示名称
- javascript - 如何在顶部对最新通知进行排序?
- java - mappedBy 引用了一个未知的目标实体属性:dataObject.PayTransactionStatement.payMaster 中的 ataObject.PayMaster.PayTransactionStatement
- c++ - 在 C++ 中实现 Objective-C (CoreML)(Adobe 插件)
- button - 我的按钮可以在移动设备上包含不同的字体吗?
- javascript - 我正在尝试在由 js 函数(像素艺术编辑器)创建的网格中设置 div 的样式
- html - 悬停时,如何更改背景图像的不透明度,而不是没有位置的文本:相对?
- angularjs - 如何处理单个对象的“ng-repeat”和“ng-model”。?
- html - 我的最大宽度:1140px 不工作它不能在我的边缘:0 自动
- flutter - 具有多个 TextField 和一个 DropDown 的行,其中一个 TextField 应该更大,并且都应该具有相同的高度