gpt4 book ai didi

javascript - 如何在点击时加粗标签?

转载 作者:行者123 更新时间:2023-11-30 13:17:42 24 4
gpt4 key购买 nike

所以标签是从数据库中填充的。单击标签后,标签需要变为红色和粗体。当点击另一个标签时,第一个标签需要回到原来的状态,新标签应该被激活,它需要是粗体和红色。出于某种原因,changeActiveStates() 仅适用于前 2 个标签,即,单击第一个标签时,它变为红色,单击第二个标签时,第一个标签变为黑色,第二个标签变为红色。单击第三个标签时,第二个标签保持红色,第三个标签变为红色。我该如何解决??

代码如下:

<html>
<span>
<input type="hidden" name="LiabFilter" id= "idLib<%=liabkey %>" value="<%=liabkey %>" />
<div>
<label for="idLib<%=liabkey%>" id="liablabel" style="cursor: hand; padding-left: 25px; font-weight: normal"
onClick ="clearLiabFilter();
document.getElementById('idLib<%=liabkey%>').checked = true;
changeActiveStates(this);">
<%=liab.getName() %>
</br>
</label>
</div>
</span>
<style type="text/css">
.activate { font-weight: bold; color:#e40000;}
.visited{ font-weight: normal; color: #000000;}


</style>
<script>
function byId(id) {
return document.getElementById ? document.getElementById(id) : document.all[id];
}

var prevLink = "";

function changeActiveStates(ele) {
if (prevLink) byId(prevLink).className = '';
ele.className = 'activate';
prevLink = ele.id;
}
</script>
</html>

最佳答案

你不喜欢 JQuery 吗?

如果没有,这应该可以。

$('label').click(function() {
$('label').removeClass('activate'); /* Remove 'activate' class from all labels */
$(this).addClass('activate'); /* Add 'activate' class to clicked label
});

编辑:Example on jsFiddle

编辑:由于提问者之前没有使用过 JQuery,所以更详细一些。

JQuery is a javscript library因此必须先由浏览器加载,然后才能执行所有漂亮的操作。

<head></head> 之间添加以下内容页面上的标签:

<script src="http//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

( Why let google host JQuery for you? )

然后添加以下内容,也在标签之间但在上面给出的脚本标签之后:

$(document).ready(function() { 
$('label').click(function() {
$('label').removeClass('activate'); /* Remove 'activate' class from all labels */
$(this).addClass('activate'); /* Add 'activate' class to clicked label
});
});

( What does $(document).ready() do? )

关于javascript - 如何在点击时加粗标签?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11402312/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com