클릭하면 굵은 글씨로 라벨을 지정하는 방법은 무엇입니까?

레이블이 데이터베이스에서 채워집니다. 레이블을 클릭하면 레이블이 빨간색으로 표시되고 굵게 표시되어야합니다. 다른 레이블을 클릭하면 첫 번째 레이블을 원래 상태로 되돌리고 새 레이블을 활성화해야하며 굵게 및 빨간색으로 표시해야합니다. 어떤 이유로 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>

출처

2012-07-09 girl_coder

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 모든 멋진 것들을 수행하려면 먼저 브라우저에서로드해야합니다.

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

는 다음 또한 태그 사이에 있지만, 위에서 주어진 스크립트 태그 다음에 다음을 추가

<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?) :

는 페이지에 <head></head> 태그 사이에 다음을 추가

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

출처

2012-07-09 20:14:27 Turnip

정확히 가리 킵니다. 네가 몇 초 만에 나를 때리는 것 같아! :) – WhyNotHugo

그래서, 그냥 다른 함수와 스크립트 태그 jquery 추가 할 또는 새 .js 파일을 만들어야합니다. 죄송합니다. 전에 jQuery를 사용 해보지 않았습니다. –

답변을 추가했습니다. 나는 그것이 도움이되기를 바랍니다. JQuery는 매우 유용하며 이와 같은 것을 매우 쉽게 만듭니다. 당신은 확실히 그것을 체크 아웃해야합니다. – Turnip

어쩌면

하지 솔루션의 최고,하지만 당신은 jQuery를 사용하여 고려 했는가? 일반적으로 너무 많은 의존성이 아니며 이러한 종류의 문제를 매우 우아하고 쉽게 해결할 것입니다. 을 더한. 브라우저 간 호환성.

출처

2012-07-09 20:14:27 WhyNotHugo

클릭하면 굵은 글씨로 라벨을 지정하는 방법은 무엇입니까?

답변

관련 문제