0

通过谷歌搜索到达这里并主要关注这个和这个线程（以及一些其他第三方资源以获得更多关于该主题的知识），我想我几乎正在尝试完成类似于用户 Combustion007 从线程正在尝试的事情。

但令我失望的是，我无法让它发挥作用。我对 JS 完全不熟悉，并且有很多东西要学习 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; }
4

1 回答 1

1

改变

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

至

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

您将“#”加倍，导致选择器像##home和##about

于 2012-07-31T22:26:08.163 回答