使用 jQuery 更改每个页面上的 CSS 属性答案

【问题标题】：Change CSS property on each page using jQuery使用 jQuery 更改每个页面上的 CSS 属性
【发布时间】：2013-04-25 15:08:36
【问题描述】：

我正在尝试为网站制作导航菜单。悬停事件 (jQuery) 更改 <div>background 位置，因此用户可以看到他指向的位置。我想要达到的最终效果是这样的：

http://jsfiddle.net/WAckU/

这个解决方案的问题是，当我点击<li>（页面更改）时，我失去了变量（背景位置重置）所以我想知道是否有任何解决方法，也许只是将 CSS 类添加到我点击的元素（类似于一些 Wordpress 主题）？我还想避免通过 cookie 保留值。

【问题讨论】：

这取决于您网站的后端的能力。 Wordpress 在 PHP 上运行，它具有一组工具，可以根据单击的内容为元素分配“活动”类，其他技术也是如此。如果不使用 Ajax、Json 和/或 Cookie，就无法使用普通的 javascript 在两个页面之间持久化。
啊，忘了说。我当然可以使用 PHP。
你当然也可以在静态页面上伪造它，只需将类添加到 HTML 中的活动元素或将其设置为 jQuery..

标签： jquery css class navigation menuitem

【解决方案1】：

在window.location.href中查看当前页面，并根据它初始设置背景图片

var currentpage = window.location.href.split("/").pop();
switch(currentpage){
    case "page1.php": $(".topmenu").css('background-position', position1);break;
    case "page2.php": $(".topmenu").css('background-position', position2);break;
    ...
}

【讨论】：

【解决方案2】：

为什么不将变量初始化为每个页面上所需的值？或者如果你不想例外，让js看一下url就知道它在哪里。

【讨论】：

页面由几个部分组成（它建立在电子商务系统上）所以我现在不认为为每个页面创建一个变量会很聪明。检查 url 似乎是一个更好的选择。谢谢，会尝试找到更多关于它的信息。