Question

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

Answer 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?）

Answer 2

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

点击时如何加粗标签？

2 个答案: