Question

我正在采取一些障碍来实现这一目标。我有4个导航链接，在内容容器中，我已经声明了一些部分，并且id已经相应地标记了它们。我想根据点击的导航链接加载所需的部分。我似乎做错了什么，如果有人能借此给我帮助，我会非常感激。

这是我的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>

Answer 1

这可能有效：

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

Answer 2

这里有一个拼写错误（内容）：

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

能解决这个问题吗？

此外，您从不使用已定义的id变量。

Answer 3

这肯定有用：

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

SEE WORKING FIDDLE

Answer 4

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

示例：
data-section="about"

不是“ #about”

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

4 个答案: