Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.3k views
in Technique[技术] by (71.8m points)

jquery - HTML5 Loading data-section when click on Navigation link

I am having some road blocks getting this going. I have 4 navigation links and within the content container, I have declared a handful sections and have id tagged them accordingly. I would like to load the desired section according to the clicked Navigation link. I seem to be doing something wrong and would highly appreciate it if anyone can lend me a help hand on this, please.

Here is my HTML code:

<!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> 
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

This could be work:

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...