0

マスター>サブマスター>page.aspxを持つWebサイトを作成しています。ユーザーがナビゲーションバーのリンクをクリックすると、その特定のリンクの色が変更され、背景の色も変更されます。私のナビゲーションはサブマスターページにあります。 jqueryを使用しましたが、機能しません。ページの読み込み時に消えます。

$(document).ready(function () {
    $('#HomeLink').click(function () {
        $('#HomeLink').css("background-color","white");
        $('#HomeLink').css("color","#00AEEC");
    });
});

<div id="UpperMenu">
                <h2><a href="#">Horizon</a></h2>
                <ul>
                    <li><a href="Home.aspx"><div id="HomeLink"><span class="NavLink">Home</span></div></a></li>
                    <li><a href="#"><div id="NewLink"><span class="NavLink">New</span></div></a></li>
                    <li><a href="#"><div id="LookupLink"><span class="NavLink">Lookup</span></div></a></li>
                    <li><a href="Reports.aspx"><div id="ReportLink"><span class="NavLink">Report</span></div></a></li>
                    <li><a href="#"><div id="ManageLink"><span class="NavLink">Manage</span></div></a></li>
                    <li><a href="#"><div id="UtilitiesLink"><span class="NavLink">Utilities</span></div></a></li>
                </ul>
            </div>
4

3 に答える 3

0

HomeLinkの色が他のcss属性で上書きされている可能性があります。ここに、htmlとcssのコードを表示できますか？

于 2012-12-20T09:54:30.953 に答える
0

#homelink への 2 つの参照ではなく、これを試してください

$(document).ready(function () {
$('#HomeLink').click(function () {
    $('#HomeLink').css({
                    background-color : '#FFF',
                    color : '#00AEEC'
     });  
});

2回実行するのではなく、ショットで実行できるはずです。

于 2012-12-20T10:03:07.243 に答える
0

コードではすべて問題ないように見えますが、次のように簡略化できます。

あなたの編集として、私はあなたのhtmlを見たdiv has <span>ので、these are the children of <a>2つのことを行うことができます:

  1. a のテキストの色を変更する

  2. スパンの背景を変更する

    $('#HomeLink').click(function() {
   $(".NavLink",this).css("background-color", "red");
   $(this).closest('a').css("color", "white");
});

そしてmake sure you have a reference to the jQuery pluginこのスクリプトの一番上にあります。

ここでテストできます: http://jsfiddle.net/5WSuv/1/

于 2012-12-20T10:00:21.173 に答える