无法获取HTML5加载数据部分时点击导航链接工作

通过谷歌搜索到达这里主要是this和this线程（和一些其他第三方来源获得更多关于这个问题的知识），我想我几乎我试图完成类似于线程用户Combustion007正在尝试的内容。无法获取HTML5加载数据部分时点击导航链接工作

但令我失望的是，我无法让它工作。我根本不在家里，并且有很多关于CSS和HTML5带来的东西，所以我猜这里只是我缺少的东西。我很感激，如果有人可以看看，并告诉我，我需要做些什么来让这件事情起作用。

我一直在这个小时，只是在这一点上，我想我必须要求一些指导。先谢谢你！ :)

HTML

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Title</title> 

<link rel="stylesheet" href="css/css.css"> 

<!--[if lt IE 9]--> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<!--[endif]--> 

</head> 

<body> 

<div class="container"> 
    <header class="headermod"> 
    <h1>Title</h1> 
    </header> 
    <nav> 
    <ul> 
    <li><a href="#" data-section="#home">Home</a></li> 
    <li><a href="#" data-section="#photo">Photography</a></li> 
    <li><a href="#" data-section="#about">About</a></li> 
    <li><a href="#" data-section="#contact">Contact</a></li> 
    </ul> 
    </nav> 
    <div class="content"> 


    <section id="home"> 
     <h2>Home</h2> 
     <p>Home</p></section> 

    <section id="photo"> 
     <h2>Photos</h2> 
     <p>Photos</p> 
    </section> 

    <section id="about"> 
     <h2>About</h2> 
     <p>About</p> 
    </section> 

    <section id="contact"> 
     <h2>Contact</h2> 
     <p>Contact</p> 
    </section> 

    <!-- end .content --></div> 
    <footer> 
    <div class="footermod"> 
    <hr class="footer-hr"> 
    <p style="text-align: left;">&copy; Copyright</p> 
    </div> 
    </footer> 
    <!-- end .container --></div> 

<script src="js/jquery-1.7.2.min.js"></script> 
<script src="js/modernizr.js"></script> 

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

</body> 

</html>

CSS

body { 
    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; 
    margin: 0; 
    padding: 0; 
    color: #FFF; 
    font-size: 90%; 
    background-color: #000000; 
} 

ul, ol, dl { 
    padding: 0; 
    margin: 0; 
} 
h1, h2, h3, h4, h5, h6, p { 
    margin-top: 0; 
    padding-right: 15px; 
    padding-left: 15px; 
    color: #FFF; 
    background-color: #000; 
} 
a img { 
    border: none; 
} 

a:link { 
    color: #FFF; 
    text-decoration: none; 
} 
a:visited { 
    color: #000000; 
    text-decoration: none; 
} 
a:hover, a:active, a:focus { 
    color: #FFF; 
    text-decoration: none; 
} 

.container { 
    width: 890px; 
    margin: 0 auto; 
    background-color: #000000; 
} 

header { 
    background: #000000; 
} 

.headermod { 

    padding-top: 20px; 

} 

.sidebar1 { 
    float: right; 
    width: 0px; 
    background: #000000; 
    padding-bottom: 10px; 
} 
.content { 
    padding: 10px 0; 
    float: left; 
    overflow:auto; 
} 


.content tr, .content ol { 
    padding: 0 15px 15px 40px; 
} 


nav ul { 
    list-style: none; 
    border-top: 1px solid #000; 
    margin-bottom: 15px; 
    background-color: #000; 
} 
nav ul li { 
    border-right: 0px solid #000; 
    float: left; 
    display: inline; 
} 
nav ul a, nav ul a:visited { 
    padding: 5px 5px 5px 15px; 
    display: block; 
    width: 200px; 
    text-decoration: none; 
    background: #39F; 
} 
nav ul a:hover, nav ul a:active, nav ul a:focus { 
    color: #FF6; 
    background-color: #000000; 
} 

footer { 
    padding: 10px 0; 
    background: #000000; 
    position: relative; 
    clear: both; 
} 

.footermod { 
    font-size: 60%; 
    text-align: left; 
} 

.footer-hr { 
    width: 880px; 
} 

header, section, footer, aside, nav, article, figure { 
    display: block; 
    background-color: #000; 
} 

section 
{ 
    display: none; 
    text-align: left; 
} 

#home { height: 400px; width: 890px; display: block; } 
#photo { height: 400px; width: 890px; } 
#about { height: 400px; width: 890px; } 
#contact { height: 400px; width: 890px; }

来源

2012-07-31 Valle

我认为你需要更换VAR sectionID = '＃' + $（本）。数据（ “节”）; var sectionID ='＃'+ $（this）.attr（“data-section”）; – 2012-07-31 22:19:56

对不起，这并不能解决问题。但非常感谢您的采访。 :) – Valle 2012-07-31 22:40:24

变化

var sectionID = '#'+ $(this).data("section");

到

var sectionID = $(this).data("section");

你加倍 “＃”，从而选择像##home和##about

来源

2012-07-31 22:26:08 MrOBrian

谢谢！在这个改变之后，这是我第一次得到链接去做某件事。尽管如此，还是有些问题。点击链接时旧部分不会淡出。它保持开放。因此，每次点击打开另一部分，如果我点击所有链接，它会打开所有链接。所以当点击打开一个新的时候，关闭上一个部分会出现问题。 – Valle 2012-07-31 22:29:43

编辑：我将代码更改为 $（“。content section：visible”）。fadeOut（）; 所以它现在的作品！但是淡入淡出有明显的延迟（新旧部分都可见）。我想这与我不熟悉的JS部分有关。 – Valle 2012-07-31 22:36:21

您可能希望将'fadeIn（）'调用放在'fadeOut'的回调中，以便新的部分不会开始淡入，直到另一个淡出为止 – MrOBrian 2012-07-31 22:38:02

无法获取HTML5加载数据部分时点击导航链接工作

回答

相关问题