1

我遇到了一些障碍。我有 4 个导航链接，在内容容器中，我声明了一些部分并相应地标记了它们。我想根据单击的导航链接加载所需的部分。我似乎做错了什么，如果有人能帮我解决这个问题，我将不胜感激。

这是我的 HTML 代码：

<!Doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>HTML 5</title>
    <meta name="descript" content="">

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

</head>
<body>

<div class="wrapper">
    <!--    HEADER  -->
    <header>
        <section class="header-wrapper">
            <!--    LOGO    -->
            <section class="logo">
                <figure>
                    <a href="#" data-section="#home-section" title="home"><img src="assets/img/global/logo2.png"></a>
                </figure>
            </section>
            <!--    NAVIGATION  -->
            <nav>
                <ul>
                    <li><a href="#" data-section="#about" title="about">ABOUT</a></li>
                    <li><a href="#" data-section="#tech" title="technology">TECHNOLOGY</a></li>
                    <li><a href="#" data-section="#vision" title="vision">VISION</a></li>
                    <li><a href="#" data-section="#press" title="press">PRESS</a></li>                  
                </ul>
            </nav>
        </section>
    </header>

    <!--    CONTENT CONTAINER   -->
    <section id="content" class="content-wrapper">  

        <section id="home" style="width:100%; height:500px; background-color:#ff9900;">
            HOME SECTION
        </section>  

        <section id="about" style="width:100%; height:500px; background-color:#ff9900;">
            ABOUT SECTION
        </section>

        <section id="tech" style="width:100%; height:500px; background-color:#ff9900;">
            TECHNOLOGY SECTION
        </section>

        <section id="vision" style="width:100%; height:500px; background-color:#ff9900;">
            VISION SECTION
        </section>

        <section id="press" style="width:100%; height:500px; background-color:#ff9900;">
            PRESS SECTION
        </section>

        <section id="privacy" style="width:100%; height:500px; background-color:#ff9900;">
            PRIVACY SECTION
        </section>

        <section id="contact" style="width:100%; height:500px; background-color:#ff9900;">
            CONTACT SECTION
        </section>      

    </section>  <!--    CONTENT CONTAINER ENDS HERE     -->
        <!--    CLEAR FOOTER    -->
      <div class="clearfooter"></div>
    </div><!--  WRAPPER ENDS HERE   -->
    <footer>Footer Here.</footer>

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

<script>
$("a").bind("click", function() {
    var id = $(this).data("section");

      $("#content section:visible").fadeOut(function() {
        $("#contnet section").fadeIn();
    });
});
</script>

</body>
</html>
4

4 回答 4

1

这可能是工作：

$("a").bind("click", function(e) {
    e.preventDefault();
    var id = $(this).data("section");
      $("#content section:visible").fadeOut();
      $(id).fadeIn();
});
于 2012-07-30T07:12:22.093 回答
0

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

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

那能解决吗？

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

于 2012-07-30T07:12:10.300 回答
0

这将毫无疑问地起作用：

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

见工作小提琴

于 2012-07-30T07:39:03.057 回答
0

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

示例：
data-section="about"

不是“#about”

于 2018-09-22T12:38:54.473 回答