当前菜单项更改容器 <div> 背景图像答案

【问题标题】：Current Menu Item changes the container <div> background image当前菜单项更改容器 <div> 背景图像
【发布时间】：2014-03-27 14:34:29
【问题描述】：

所以这可能会有点令人困惑，但基本上我正在尝试获取当前页面/菜单项来更改父 div 的背景图像。诀窍是，一些菜单项列在多个选项卡下，因此我试图区分页面加载后单击的是哪个菜单项。

这是我快速整理的一个例子：http://jsfiddle.net/r6r7U/

因此，在本例中，当页面加载时，我想根据单击的菜单/子菜单项更改具有“更改背景”类的 div 的背景图像。但是，如您所见，“Golden Retriever”超链接存储在两个单独的菜单项下。

我正在考虑以某种方式使用以下内容：

.hasClass('current-menu-item')

我确信这个问题非常令人困惑，但基本上我不确定如何在 CSS 或 Jquery 中执行此操作，因为我的背景是页面上加载的第一件事。

【问题讨论】：

好吧。您可以简单地将背景图像用作每个菜单项上的自定义数据属性，data-bg-img="foo.jpg" 或其他东西 - 然后您只需从当前菜单项中获取该属性的内容并为您的 div 元素设置背景图像......更复杂的方法是可能的，但作为开始，这应该没问题。

【解决方案1】：

如果这是 navigation menu 您必须在当前所在的页面上标记，例如使用 .active 类：

所以当页面加载时，它已经在 html 中标记为活动类。 ul元素有id，每个ul都有自己的背景色

如果您使用类似 jquery tabs http://jsfiddle.net/r6r7U/12/

【讨论】：