jquery导航显示和隐藏多个页面

被要求制作SPA披萨店并遇到显示和隐藏功能的问题。仅在主页显示在任何时候都jquery导航显示和隐藏多个页面

<nav> 
 
     <div> 
 
      <ul> 
 
       <li><a href="#home" id="navHome" class="links" rel="Home">Sicilian Home</a></li> 
 
       <li><a href="#menu" id="navMenu" class="links" rel="Menu">Sicilian Menu</a></li> 
 
       <li><a href="#about" id="navAbout" class="links" rel="About">Sicilian About</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav>

$(document).ready(function() 
     { 
      $("navHome").click(function (event) { 
       $("home").show(); 
       $("menu", "about").hide(); 
      }); 
       $("navMenu").click(function (event) { 
        $("menu").show(); 
        $("about", "home").hide(); 
       }); 
       $("navAbout").click(function (event) { 
        $("about").show(); 
        $("home", "menu").hide(); 

       }); 
      }

来源

2015-02-24 Ant

如果任何人都可以提出一个可以帮助我的建议，一直坐在这里一段时间，并且确定这是一件简单的事情，而且在我的脸上，但是已经看了太久。 – Ant 2015-02-24 19:00:15

你的选择器是错误的，你应该包含哈希符号。例如：#home，#menu，#about – slashsharp 2015-02-24 19:02:10

仍然只显示那个家。有人告诉我，它可能是document.ready和其他人都说可能是因为里面有对方，而不是在同一水平... – Ant 2015-02-24 19:04:09

你的CSS选择器是不正确的。基于您的HTML，你需要使用ID选择：

$("#navHome").click(function (event) { 
    $("#home").show(); 
    $("#menu, #about").hide(); 
}); 
$("#navMenu").click(function (event) { 
    $("#menu").show(); 
    $("#about, #home").hide(); 
}); 
$("#navAbout").click(function (event) { 
    $("#about").show(); 
    $("#home, #menu").hide(); 
});

而且是有区别的：$("menu", "about")的意思是“发现菜单标签中关于标签”，而$("#menu, #about")意味着“找到ID菜单和元素元素有关的ID” 。

来源

2015-02-24 19:14:32 dfsq

谢谢，是的，我改变了＃发布后，但仍然只看到只有家庭div – Ant 2015-02-24 23:31:50

这里是你的演示：http://jsfiddle.net/x30w541b/ – dfsq 2015-02-25 06:28:53

我复制了你的javascript和html来模拟这个问题。我在函数中添加了警报语句，以检查是否首先捕获了单击事件。但是，警报声明本身并没有出现。

你需要做以下两个更改您的脚本工作：

前缀#用的ID来捕获点击事件
关闭)缺少在脚本结束

请看以下最终脚本：

$(document).ready(function() 
    { 
     $("#navHome").click(function (event) { 
      $("home").show(); 
      $("menu", "about").hide(); 
     }); 
     $("#navMenu").click(function (event) { 
      $("menu").show(); 
      $("about", "home").hide(); 
     }); 
     $("#navAbout").click(function (event) { 
      $("about").show(); 
      $("home", "menu").hide(); 
     }); 
    } 
)

来源

2015-02-25 03:39:41 Mithun

jquery导航显示和隐藏多个页面

回答

相关问题