页脚上的 javascript 驱动导航菜单答案

【问题标题】：javascript driven navigation menu on footer页脚上的 javascript 驱动导航菜单
【发布时间】：2012-02-23 17:24:45
【问题描述】：

标题上的导航菜单如下所示：

            <ul id="nav">
                <li id="home">
                   <a class="mainmenu" href="#">Link1</a>                    
                </li>

                <li>
                   <a class="mainmenu" href="#">Link2</a>                    
                </li>


            </ul>

页脚部分使用了相同的标记，但它不起作用。我还有一个名为 jscript.js 的文件，其中包含网站的所有 javascript，我发现了这个变量：

 var navTarget = "ul#nav li a" //menu link to target

此外，如果我删除例如页眉部分中的标记，页脚将起作用。我也尝试使用 .nav 而不是 #nav，但我遇到了同样的问题。

导航菜单由javascript控制，我不在这里发布代码，因为它很大，为了更好地理解导航菜单是如何工作的，请看here

我在 javascript 中找到了这个：

//设置菜单项 ID

 $(navTarget).each(function(i){
    i++                     
    this.id = this.id +"_" +i ;
 });

//菜单点击功能

 $(navTarget).click(function() {

    //ensure link isnt clickable when active
    if ($(this).hasClass('active')) return false;

    //get id of clicked item
    activeNavItem = $(this).attr('id');

    //call the page switch function
    switchContent();



});

//内容切换功能

 var switchContent = function (){


        //set previous and next link & page ids
        var PrevLink = $(navTarget+'.active')
        $(PrevLink).removeClass('active');
        var PrevId = $(PrevLink).attr('id');
        //alert(PrevId)

        var NextLink = $('#'+activeNavItem).addClass('active');
        var NextId = activeNavItem
        //alert(NextId);

【问题讨论】：

标签： javascript linker footer

【解决方案1】：

从外观上看，JS 代码使用了一些 CSS 选择器（如 jquery 的 $ 或 dojo 的 dojo.query），它根据 navTarget 的值拉入 DOM 元素目标，然后对其进行处理：把它变成一个菜单。

但它只做一次。

您需要查看 JS 并查看使用 navTarget 的位置。那么应该很容易让它在$(navTarget)的所有结果上创建菜单，而不仅仅是第一次点击。

此外，您的 dom 中应该只有一个 ID 实例。

你可以把它改成一个类：

var navTarget = "ul.nav li a"

在标记中：

<div class='nav'>

但是您仍然需要查看 JS 并确保它针对 CSS 选择器返回的一组目标运行。该代码可能只需要一个结果并仅使用它：results[0]。

【讨论】：

+1 表示该脚本可能根本不适用于多个菜单。
请再看看我的问题，现在有了 navTarget 的改进
您是否尝试将 navTarget 切换为类而不是 id？该代码似乎支持一组元素。

【解决方案2】：

页面上只能有一个给定 id 的元素。所以根据你的描述，听起来你有 2 个。

我不知道这个脚本是如何工作的，但是你可以尝试使用类来代替。

<ul class="nav">

var navTarget = "ul.nav li a";

您必须更改 HTML 和 JS navTarget 选择器字符串。

但您的脚本也很有可能根本不支持创建多个菜单。如果是这种情况，您可能需要修复该脚本或找到更好的脚本。

【讨论】：

【解决方案3】：

如果页脚的代码确实与页眉相同，那就是问题所在。 id 只能用于页面中的单个元素，jQuery 的选择器只会返回第一个元素。像“ul#nav li a”这样的含义代码仅适用于标题。

最简单的解决方案是将 id 更改为类，例如：

<ul class="nav">

... 并更改您的 jQuery 以匹配它，例如：

var navTarget = "ul.nav li a";

更新：而且（忽略这最终可能会变成三个重复的帖子），这个修复可能根本不够，因为脚本的其他部分可能只适用于单个菜单。

【讨论】：