如何解决使用ID选择td,然后添加一个类并删除类
我有一个带有导航链接的html表。当您将鼠标悬停在链接上时,我可以修改背景颜色和链接文本的颜色。我想为活动链接做类似的事情。我一直在尝试使用jQuery。我已经使用id选择了链接所在的td,然后将类添加到td。似乎什么都没有改变或起作用。下面是我的html,下面是我的JavaScript。请告诉我我的方式的错误。
$(function() {
var links = ['1','2','3'];
$("a").click(function() {
$.each(links,function(index,value) {
$("#" + value).removeClass('link-active-td');
$("#" + value + 'td').removeClass('link-active-td');
});
var linkid = $(this).attr("id");
$("#" + linkid).addClass('link-active-td');
$("#" + linkid + 'td').addClass('link-active-text');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id="1">
<a class="a-nav" id="1td" href="..." ?>
<div>
First Anchor Text
</div>
</a>
</td>
<td id="2">
<a class="a-nav" id="2td" href="..." ?>
<div>
Second Anchor Text
</div>
</a>
</td>
<td id="3">
<a class="a-nav" id="3td" href="..." ?>
<div>
Second Anchor Text
</div>
</a>
</td>
</tr>
</table>
这是python django项目的前端。
解决方法
请尝试以下操作: 我已经更新了脚本。
外植:
要将类别添加到td
,您可以使用parent()
之类的 $("#" + linkid).parent().addClass('link-active-text');
选择器
您可以直接使用下面的代码删除课程
$('.link-active-td').removeClass('link-active-td');
$('.link-active-text').removeClass('link-active-text');
这里是完整代码:
$(function() {
$("a").click(function() {
$('.link-active-td').removeClass('link-active-td');
$('.link-active-text').removeClass('link-active-text');
var linkid = $(this).attr("id");
$("#" + linkid).addClass('link-active-td');
$("#" + linkid).parent().addClass('link-active-text');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td id="1">
<a class="a-nav" id="1td" href="#">
<div>
First Anchor Text
</div>
</a>
</td>
<td id="2">
<a class="a-nav" id="2td" href="#">
<div>
Second Anchor Text
</div>
</a>
</td>
<td id="3">
<a class="a-nav" id="3td" href="#">
<div>
Second Anchor Text
</div>
</a>
</td>
</tr>
</table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。