1

したがって、ラベルはデータベースから入力されます。ラベルをクリックしたら、ラベルを赤と太字に変える必要があります。別のラベルをクリックすると、最初のラベルが元の状態に戻り、新しいラベルがアクティブになり、太字と赤で表示される必要があります。何らかの理由で、changeActiveStates（）は最初の2つのラベルに対してのみ機能します。つまり、最初のラベルがクリックされると赤になり、2番目のラベルがクリックされると最初のラベルが黒になり、2番目のラベルが赤になります。3番目のラベルをクリックすると、2番目のラベルは赤のままで、3番目のラベルは赤に変わります。これを修正するにはどうすればよいですか？

コードは次のとおりです。

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

（なぜグーグルに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 に答える