HTML5-Laden von Daten-Abschnitt, wenn Sie klicken Sie auf die Navigation link

Ich bin mit einigen Straßensperren immer diese gehen. Ich habe 4 navigation und links im Inhalt-container, ich habe erklärt eine Handvoll Abschnitte und id-tagged diese entsprechend. Ich würde gerne laden Sie die gewünschte Abschnitt nach der geklickte Navigations-link. Ich scheine etwas falsch zu machen und wäre sehr dankbar, wenn jemand verleihen kann mir eine helfen hand, bitte.

Hier ist mein 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>

InformationsquelleAutor Combustion007 | 2012-07-30

html5 jquery

1

Könnte dies sein, arbeiten:
```
$("a").bind("click", function(e) {
    e.preventDefault();
    var id = $(this).data("section");
      $("#content section:visible").fadeOut();
      $(id).fadeIn();
});
```
vielen Dank für Eure Hilfe. Es funktioniert wie erwartet. Ich wirklich schätzen Ihre Hilfe. Nur eine kurze Frage, Wie kann ich das machen das Haus Abschnitt Inhalte auf den laden. Also, wenn die Website geladen wird, Zuhause Abschnitt Inhalt zu sehen ist? Thx a lot.
Sie konnte das mit jQuery: $('.content-wrapper').children().not('#home').hide(); oder CSS: hinzufügen display:none zum Abschnitt Stil

InformationsquelleAutor Alex Ball
0

Haben Sie einen Tippfehler hier (contnet):
```
$("#contnet section").fadeIn();
```
nicht, dass es beheben?

Auch, die Sie nie verwenden und die id Variablen, die Sie definiert haben.

Thx codebox. Alex-Funktion gearbeitet und geholfen, mir bewusst, dass mein worng tun.

InformationsquelleAutor codebox

Dieser trotzig Arbeit:

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

FINDEN Sie unter ARBEITEN FIDDLE

InformationsquelleAutor Ahsan Khurshid

0

Entfernen '#' data-Sektion in der navigation

Beispiel:

data-section="about"

nicht "#über"

InformationsquelleAutor dimme

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.