Javascript 如何在单击时添加加粗标签？_Javascript_Html_Css

Javascript 如何在单击时添加加粗标签？

javascript html css

Javascript 如何在单击时添加加粗标签？,javascript,html,css,Javascript,Html,Css,因此，标签是从数据库中填充的。单击标签后，标签需要变为红色和粗体。当单击另一个标签时，第一个标签需要恢复到原始状态，新标签应该被激活，并且需要粗体和红色。出于某些原因，ChangeActiveState仅适用于前2个标签，即单击第一个标签时，它将变为红色；单击第二个标签时，第一个标签将变为黑色，第二个标签将变为红色。单击第三个标签时，第二个标签保持红色，第三个标签变为红色。我该如何解决这个问题代码如下： <html> <span> <input type="hid

因此，标签是从数据库中填充的。单击标签后，标签需要变为红色和粗体。当单击另一个标签时，第一个标签需要恢复到原始状态，新标签应该被激活，并且需要粗体和红色。出于某些原因，ChangeActiveState仅适用于前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吗？它通常不会有太多的依赖性，并且会为您轻松优雅地解决此类问题。加跨浏览器兼容性。

您反对JQuery吗

如果没有，这应该是可行的

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

编辑：

编辑：更详细一点，因为提问者以前没有使用过JQuery

因此，在你做所有漂亮的事情之前，必须先通过浏览器加载

在页面上的标记之间添加以下内容：

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

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

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