使用jQuery创建动态菜单

Question

我们正在创建一个新网站。

我们希望用代表页面不同部分的iframe来构建网站，导航，内容，标题等。

但是我们的导航菜单中内置了一些“上下文”。也就是说，如果您是“关于”部分，则会突出显示关于“关于”的按钮/链接，以指示这是您在网站中的位置。我想在每个页面中包含一个meta标签，就像这样（或类似的东西）

<meta name="page" content="--page name goes here--" />

然后我希望能够为所有导航菜单项提供ID。当导航菜单项的ID与“页面”元标记的内容匹配时，我希望突出显示的图像显示而不是常规图像。

你能否概述基本步骤，或许还有一些代码来完成这项工作。

Answer 1

而不是将id放在元标记中，为什么不在页面的ready事件处理程序中执行它：

 $(document).ready(function(){
     $("#ID_OF_MENU_FOR_THIS_PAGE").addClass("CLASS_TO_HIGHLIGHT_CURRENT_MENU");
 });

效果很好，而且我经常使用它！

Answer 2

最简单的方法就是说，例如你在导航菜单中有5个链接（全局导航）

您可以将id =“about”添加到导航项

然后使用这个JQuery代码

<script>
    $(document).ready(function() {
        $('about').addClass('active');
    });
</script>'

并将css类定义为活动状态，并让它做任何你想做的事情（如突出显示或watever）

如果要在页面上更改图像选择，可以使用以下代码：           $（document）.ready（function（）{             $（'active'）。css（'background'，'url（/images/tabs/account_hover.png）no-repeat 0 0'）;         }）;     “