HTML5 Loading data-section when click on Navigation link

Question

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>

score 1 · Accepted Answer · answered Jul 30 '12 at 07:12

1

This could be work:

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

answered Jul 30 '12 at 07:12

Alex Ball

4,404
2
17
23

thanks a lot for your help. It does work as expected. I really appreciate all your help. Just a quick question, How would I make the home section content available on load. So when the site is loaded, home section content is visible? Thx a lot. – Combustion007 Jul 30 '12 at 07:43
@Combustion007 you could do it with jQuery: `$('.content-wrapper').children().not('#home').hide();` or CSS: adding `display:none` to section style – Alex Ball Jul 30 '12 at 07:52

score 0 · Answer 2 · answered Jul 30 '12 at 07:12

0

You have a typo here (contnet):

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

does that fix it?

Also, you never use the id variable which you have defined.

answered Jul 30 '12 at 07:12

codebox

19,927
9
63
81

Thx codebox. Alex's function worked and helped me realized my worng doing. – Combustion007 Jul 30 '12 at 07:44

score 0 · Answer 3 · answered Jul 30 '12 at 07:39

0

This will defiantly work:

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

SEE WORKING FIDDLE

answered Jul 30 '12 at 07:39

Ahsan Khurshid

9,383
1
33
51

score 0 · Answer 4 · edited Sep 22 '18 at 16:08

0

Remove '#' in data-section at navigation

Example:
data-section="about"

not "#about"

edited Sep 22 '18 at 16:08

Elletlar

3,136
7
32
38

answered Sep 22 '18 at 12:38

dimme

1

HTML5 Loading data-section when click on Navigation link

4 Answers4

Linked