HTML5单击导航链接时加载数据部分

我有一些路障让这个进展。 我有4个导航链接，在内容容器中，我已声明了一些部分，并相应地标记了它们。 我想根据点击的导航链接加载所需的部分。 我似乎做错了什么，如果有人能借此帮助我，我会非常感激。

这是我的HTML代码：

          
  
 
  
 
  
 
  
 
 
ABOUT
 
TECHNOLOGY
 
VISION
 
PRESS
 
 
 
 
  
 
 HOME SECTION 
 
 ABOUT SECTION 
 
 TECHNOLOGY SECTION 
 
 VISION SECTION 
 
 PRESS SECTION 
 
 PRIVACY SECTION 
 
 CONTACT SECTION 
 
   
 
 
Footer Here.
    $("a").bind("click", function() { var id = $(this).data("section"); $("#content section:visible").fadeOut(function() { $("#contnet section").fadeIn(); }); });    

Answer 1

这可能是有效的：

 $("a").bind("click", function(e) { e.preventDefault(); var id = $(this).data("section"); $("#content section:visible").fadeOut(); $(id).fadeIn(); }); 

Answer 2

你这里有一个错字（contnet）：

 $("#contnet section").fadeIn(); 

这样可以解决吗？

此外，您永远不会使用已定义的id变量。

Answer 3

这将是挑战性的工作：

 $("a").on("click", function(e) { e.preventDefault(); var sectionID = '#'+ $(this).data("section"); $("#content section:visible").fadeOut(); $(sectionID).fadeIn(); }); 

看到工作的好消息

Answer 4

在导航中删除数据部分中的“＃”

例：
data-section="about"

不是“#about”