如何在点击时加粗标签？答案

【问题标题】：How to bold label on click?如何在点击时加粗标签？
【发布时间】：2012-07-09 20:08:58
【问题描述】：

所以标签是从数据库中填充的。单击标签后，标签需要变为红色和粗体。当点击另一个标签时，第一个标签需要恢复到原始状态，新标签应该被激活，它需要是粗体和红色。出于某种原因，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>

【问题讨论】：

标签： javascript html css

【解决方案1】：

你反对 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?)

【讨论】：

是的，我的观点完全正确。看起来你比我快了几分之一秒！ :)
那么，我只是在脚本标签中添加 jquery 和其他函数还是应该创建一个新的 .js 文件。抱歉，我以前从未使用过 jQuery。
在答案中添加了更多内容。我希望它有所帮助。 JQuery 非常有用，它使这样的事情变得非常容易。你一定要看看

【解决方案2】：

也许不是最好的解决方案，但您是否考虑过使用 jQuery？它通常不会有太多的依赖，并且会非常优雅和轻松地为您解决这些问题。加。跨浏览器兼容性。

【讨论】：