我目前正在为菜单项使用以下代码:
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,请记住我是业余爱好者,因此我需要外行人的任何解释(最好带示例)。
答案 0 :(得分: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');
}
}
---编辑---
这是你的DEMO。
该示例使用localStorage,但它与window对象的工作方式相同。一定要复制并粘贴代码并在本地计算机上试用,因为jsfiddle有一些阻止正在发生的事情。
答案 1 :(得分: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 >";
希望这有帮助。
答案 2 :(得分:1)
您可以使用一点jquery
来查看url
是什么,解析它,然后将active
类重新应用到相应的链接。
I.E(我没有测试过这个......这更像是一个想法......)
var path = window.location.pathname;
$(a).each(function(){
if (path.indexOf($(this).prop("href")) > 0){
$(this).child("button").addClass("active");
break;
}
});
答案 3 :(得分:-1)
$('.myButtonLink').click(function() {
$(this).css('background-position', '0 0');
});