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，但它与 window 对象的工作方式相同。请务必复制并粘贴代码并在您的本地机器上试用，因为 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 回答