0

Google検索でここにたどり着き、主にこれとこのスレッド（およびこのテーマについてより多くの知識を得るための他のサードパーティのソース）に従っていると、スレッドのユーザー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");

「#」を 2 倍にすると、次のようなセレクターになります##home。##about

于 2012-07-31T22:26:08.163 に答える