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

Question

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

            <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控制的，我不在这里发布代码，因为它很大，为了更好地理解导航菜单的工作原理，请查看这里

我在javascript中找到了这个：

//SET MENU ITEM IDs

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

//MENU CLICK FUNCTION

 $(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();



});

//CONTENT SWTICH FUNCTION

 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);

Answer 1

从表面上看，JS 代码正在使用一些 CSS 选择器（如 jquery 的 $ 或 dojo 的 dojo.query），它根据 navTarget 的值提取 DOM 元素目标，然后执行以下操作it：将其变成菜单。

但它只做一次。

你需要看一下JS，看看哪里使用了navTarget。然后，让它在 $(navTarget) 的所有结果上创建菜单应该相当容易，而不仅仅是第一次点击。

另外，你的 dom 中应该只有一个 ID 实例。

您可以将其更改为类：

var navTarget = "ul.nav li a"

在标记中：

<div class='nav'>

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

Answer 2

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

我不知道这个脚本到底是如何工作的，但您可以尝试使用类。

<ul class="nav">

var navTarget = "ul.nav li a";

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

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

Answer 3

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

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

<ul class="nav">

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

var navTarget = "ul.nav li a";

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