1

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

这是代码：

<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>
4

2 回答 2

3

你讨厌 JQuery 吗？

如果没有，这应该有效。

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

编辑：关于 jsFiddle 的示例

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

JQuery 是一个 javscript 库，因此必须由浏览器加载，然后才能执行所有漂亮的操作。

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

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

（为什么让 google 为你托管 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
    });
});

（$(document).ready() 是做什么的？）

于 2012-07-09T20:14:27.860 回答
0

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

于 2012-07-09T20:14:27.610 回答