使用 jQuery 创建动态菜单答案

【问题标题】：Creating a dynamic menu with jQuery使用 jQuery 创建动态菜单
【发布时间】：2009-06-24 14:34:54
【问题描述】：

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

我们希望用 iframe 组成网站，这些 iframe 代表页面的不同部分、导航、内容、标题等。

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

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

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

您能否概述完成这项工作的基本步骤，或许可以使用一些代码。

【问题讨论】：

【解决方案1】：

你为什么不在页面的就绪事件处理程序中而不是将 id 放在元标记中：

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

效果非常好，我经常使用它！

【讨论】：

【解决方案2】：

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

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

然后使用这个 JQuery 代码

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

并定义一个css类为活动的，让它做任何你想做的事情（比如highlight或watever）

如果您想更改页面选择上的图像，您可以使用以下代码： $(文档).ready(函数() { $('active').css('background', 'url(/images/tabs/account_hover.png) no-repeat 0 0'); }); '

【讨论】：