9

現在、メニュー項目に次のコードを使用しています。

HTML

<li>
<a id="About" class="button" href="About Us.cshtml">About Us</a>
</li>
<li style="margin-left: 30px;">
<a id="Services" class="button" href="Services.cshtml">Services</a>
</li>
<li style="margin-left: 30px;">
<a id="Contact" class="button" href="Contact Us.cshtml">Contact Us</a>
</li>

CSS

#About {background-image: url(../Buttons/About.png); width: 87px;}
#Services {background-image: url(../Buttons/Services.png); width: 112px;}
#Contact {background-image: url(../Buttons/Contact.png); width: 117px;}
a.button {height: 20px; display: inline-block; background-repeat: no-repeat}
a.button:hover {background-position: 0 -20px;}
a.button:active {background-position: 0 -40px;}

ボタンをクリックしてページをロード/更新した後も、ボタンを「アクティブ」状態のままにする必要があります。

ソリューションにjavascriptが必要な場合は、私はアマチュアランクであるため、素人の言葉で説明する必要があることを覚えておいてください（できれば例を使用して）。

4

4 に答える 4

3

一部のJSでCSSクラスを使用することに固執するのが最善です。このようにして、疑似クラス（：hover）とCSSクラスの両方のスタイルを混在させることができます。

$('.myButtonLink').click(function() {
  $(this).addClass('active_class');
});

または、切り替えたい場合。

$('.myButtonLink').click(function() {
  $(this).toggleClass('active_class');
});

このように、レイアウトに変更があった場合は、そのクラスの一部であるCSSスタイルを更新するだけでよく、JavaScriptコードを更新する必要はありません。

windowまたはlocalStorage要素を使用して、ページの更新全体でステージを維持できます。

var key = getStorageKeyFromLink(link);
window.activeStateLookup = window.activeStateLookup || {};
window.activeStateLookup[key] = {
  element : link
};

これで、ページが読み込まれたときに、すべての画像を更新できます。

window.onload = function() {
  var lookup = window.activeStateLookup || {};
  for(var key in lookup) {
    var element = lookup[key].element;
    element.addClass('active_class');
  }
}

- - 編集 - -

これがあなたのデモです。

この例ではlocalStorageを使用していますが、ウィンドウオブジェクトでも同じように機能します。jsfiddleには何が起こっているかに対していくつかのブロックがあるため、必ずコードをコピーして貼り付け、ローカルマシンで試してください。

http://jsfiddle.net/GDXLb/7/

于 2012-11-30T17:37:13.887 に答える
3

現在表示しているページを特定する必要があります。

var page = window.location.href;
page = page.substr((page.lastIndexOf('/') + 1));
page = page.split('.');
page = page[0];
//At this point you will have the current page only with no extension or query paramaters
//I.E. "About Us"
page = page.toUpperCase();
//This accounts for upper or lower casing of urls by browsers.
switch(page) {
    case "ABOUT US":
        $('#About').addClass('< name of active button class >');
        break;
    case "SERVICES":
        $('#Services').addClass('< name of active button class >');
        break;
    case "CONTACT US":
        $('#Contact').addClass('< name of active button class >');
        break;
}

jQueryを使用していない場合は、次の行を置き換えます。

$('#< element name >').addClass('< name of active button class >');

この行で：

document.getElementById("< element name >").className += " < name of active button class >";

お役に立てれば。

于 2012-11-30T17:49:35.417 に答える
1

少し使用して、がjquery何であるかを確認し、それを解析してから、クラスを適切なリンクにurl再適用することができます。active

IE（私はこれをテストしていません...それはもっとアイデアです...）

var path = window.location.pathname;

$(a).each(function(){
    if (path.indexOf($(this).prop("href")) > 0){
        $(this).child("button").addClass("active");
        break;
    }
});
于 2012-11-30T17:47:25.217 に答える
-1 
$('.myButtonLink').click(function() {
 $(this).css('background-position', '0 0');
});

デモ

于 2012-11-30T17:28:41.277 に答える