「メモリ」の次の記事のJavascript（Jquery）コード

まず、私の質問のためにCSSの（より簡単な）可能性を知っています。しかし、私はJS（Jquery）を学びたいと思っていますので、私に同行してください。「メモリ」の次の記事のJavascript（Jquery）コード

私の計画： メニュー項目（コンテンツ部門内の記事にリンク）。最初は最初の記事（#intro）のみが表示されます。＃メニュー内のすべての記事は、javascript配列でなければなりません。私がを押すと、またはが表示されます。の別の記事は、メニュー（記事）の配列に対応しています。

これは、私はそれが最終的に（これは「骨構造」である気）のように見えるしたいもののプレビューです：

以下の私のコードを見つけてください：

を私はJSに新しいです。別々の記事が表示されない理由を理解できません。最初はすべてを隠す機能が働いています。

私のhtmlコード：

 <div id="wrapper"> 
    <header> 

    <div id="logo" onclick="window.location.href='https://placeholdit.imgix.net/~text?txtsize=33&txt=50×50&w=50&h=50'"> 
     <img src="img/logo.png" alt="logo" /> 
     <h1>Hartmeting voor fitte mensen</h1> 
    </div> 

    </header> 

    <!-- Stappenplan Menu --> 
    <nav id="menu"> 
    <ul> 

     <li><a href="#menu_a"> Introductie </a></li> 
     <li><a href="#menu_b"> Het Probleem </a></li> 
     <li><a href="#menu_c"> Stappenplan </a></li> 
     <li><a href="#menu_d"> Hartmeting </a></li> 
    </ul> 

    </nav> 

    <!-- HET STAPPENPLAN --> 
    <div id="content"> 

    <!-- Intro Slide --> 
    <article id="menu_a"> 
     <h2>Introductie</h2> 
     <br> 
     <figure> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250×250&w=250&h=250" , alt="Intro Afbeelding" /> 
     </figure> 
     <p>BLA BLA BLA BLA BLA BLA</p> 
    </article> 

    <!-- Slide 1 --> 

    <article id="menu_b"> 
     <h2>Het Probleem</h2> 
     <br> 
     <figure> 
     <img src="img/hetprobleem1.jpg" , alt="Eerste Afbeelding" /> 
     </figure> 
     <p>BLA BLA BLA BLA BLA BLA</p> 
    </article> 

    <!-- Slide 2 --> 

    <article id="menu_c"> 
     <h2>Hoe kan mijn hartslag meten?</h2> 
     <br> 
     <figure> 
     <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250×250&w=250&h=250" , alt="Tweede Afbeelding" /> 
     </figure> 

     <p>BLA BLA BLA BLA BLA BLA</p> 

    </article> 

    <!-- Slide 3 --> 

    <article id="menu_d"> 

     <h2>Hart Meten</h2> 
     <br> 
     <figure> 
     <!-- Hartmeet tool --> 
     <div> 
      <div id="klik_Hart" class="heart"> 
      <h3 id="uitleg"> 

                 </h3> 
      </div> 
      <br> 
      <br> 
      <br> 

      <!-- Einde hartmeet tool--> 

     </figure> 

     <p>BLA BLA BLA BLA BLA BLA</p> 
    </article> 

    <!-- ABOUT --> 
    <!-- <div id="about"> 

             <p>TEST TEST TEST TEST TEST TEST TEST TEST TEST </p> 

            </div> --> 


    <!-- Buttons --> 
    <table id="volgorde"> 
     <th> 
     <button class="button" name="previous">Vorige</button> 
     </th> 
     <th> 
     <button class="button" name="next">Volgende</button> 
     </th> 
     <th> 

     <!-- Checkbox Auto Slider --> 
     <div class="auto_menu"> 
      <input type="checkbox" id="checkbox"> 
      <label for="checkbox">Auto Manual</label> 
     </div> 
     <!-- --> 
     </th> 

    </table> 

    <div id="buffer"></div> 
    <footer> 
     <a href="#wrapper"> to the top! </a> 
    </footer>

私のJSコード：

 $(document).ready(function() { 
    $('#content').hide(); 
}); 

var visible = $('#menu_a').first(); 

var show_me = function(article) { 

    visible.hide(); 
    visible = article; 
    visible.show(); 
} 

$("#menu_a").click(function(event) { 

    var id_of_article = $(this).attr('href'); 
    var the_article = $(id_of_article); 
    show_me(the_article); 
    even.preventDefault(); 
}); 


$('#next').click(function(event) { 
    var next = visible.next(); 
    if (next.length != 0) { // is there another article left? 
    show_me(next); 
    } 
    event.preventDefault();

私のCSSスタイルシート：

#titel { 
    color: #B0C4DE; 
    text-align: center; 
} 

body { 
    background-color: #708090; 
    color: grey; 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300; 
    font-size: 12pt; 
    width: 100%% 
} 

#wrapper { 
    width: 90%; 
    margin-left: auto; 
    margin-right: auto; 
    background-image: url("../img/bg.jpg"); 
    background-size: cover; 
    background-position: left top; 
    border: 2px groove #191970; 
    overflow: auto; 
} 

#content { 
    margin-left: auto; 
    margin-right: auto; 
    float: left; 
    width: 70%; 
} 

#content img { 
    height: 250px; 
    width: 450px; 
} 

#menu { 
    font-weight: thin; 
    color: grey; 
    float: left; 
    width: 15%; 
    text-align: center; 
    margin-left: 5%; 
    margin-top: 6.7%; 
    font-size: 10pt; 
} 


/*#about{ 
    margin-left: auto; 
    margin-right: auto; 
    margin-bottom: 50%; 
    clear: left; 
    float: left; 
    float: right; 
    width: 15%; 
    text-align: center; 
}*/ 

ul { 
    list-style-type: none; 
} 

h1 { 
    text-shadow: 1px 1px 3px #00008B; 
} 

a { 
    display: block; 
    text-decoration: none; 
    color: #FFA07A; 
    background-color: grey; 
    border: 1px solid #B0C4DE; 
    padding: 5px; 
} 

a:hover { 
    background-color: #FAEBD7; 
    color: blue; 
} 

footer { 
    overflow: hidden; 
    clear: both; 
} 

#volgorde { 
    font-weight: thin; 
    color: grey; 
    width: 10%; 
    text-align: center; 
    clear: both; 
    margin-left: 3%; 
    margin-bottom: 2%; 
} 

.button { 
    background-color: #5F9EA0; 
    color: #FFA07A; 
    border: none; 
    color: white; 
    padding: 5px 30px; 
    text-align: center; 
    text-decoration: none; 
    display: inline-block; 
    font-size: 14px; 
} 

.heart { 
    color: #FBF9FF; 
    background-image: url("../img/hart4.png"); 
    background-size: 150px 150px; 
    height: 150px; 
    width: 150px; 
} 

.heart:hoover { 
    color: #FFA07A; 
    background-color: grey; 
} 

#uitleg p { 
    color: #FA8072; 
} 

#logo img { 
    float: left; 
    width: 60px; 
    height: 60px; 
    margin-left: 2%; 
} 

#logo h1 { 
    position: relative; 
    top: 15px; 
    left: 10px; 
} 

#klik_ { 
    text-align: center; 
} 

article p { 
    height: 200px; 
    width: 450px; 
    font-size: 10pt; 
    color: grey; 
    font-weight: bold; 
    overflow: scroll; 
    margin-left: 4%; 
    margin-bottom: 5%; 
    text-align: justify; 
    text-justify: inter-word; 
} 

#buffer { 
    clear: both; 
    height: 10%; 
} 

#stappen { 
    font-weight: bold; 
    font-size: 10pt; 
} 

.auto_menu { 
    position: relative; 
    margin: 5px auto; 
    width: 160px; 
    font-size: 14px; 
}

私は何をDOIています私のJSで間違っていますか？私の意図は、すべてのメニュー項目を変数に置き、 'next'/'previous'ボタンでメニュー項目の内容を表示することでした。

JSFiddle Preview

EDIT

var articleIds=['menu_a', 'menu_b', 'menu_c', 'menu_d']; 

var visible = $('#menu_a').first(); 

var show_me = function(article) { 

    visible.hide(); 
    visible = article; 
    visible.show(); 
} 

$("#menu_a").click(function(event) { 

    var id_of_article = $(this).attr('href'); 
    var the_article = $(id_of_article); 
    show_me(the_article); 
    even.preventDefault(); 
}); 

$('#next').click(function (event) 
    { 
     var next; 
     if (visible.attr('#content') == articleIds[articleIds.length - 1])//article is the last one 
      next = $('#' + articleIds[0]); //come back to first one 
     else 
      next = visible.next(); 
     show_me(next); 
     event.preventDefault(); 
    });

出典

2016-11-25 user7186746

を私はあなたのコード内のいくつかの変更をしました。いくつかのdivには終了タグがなく、画像にははsrc = ""、alt = ""の間に '、'を入れます。それらの間にはスペースだけが必要です。そして、スクリプトはドキュメントの最後になければなりません。そして、次のボタンはname = 'next'と書いています。これはid = "next"でなければなりません。その後、私は行を削除しました$('#content').hide(); $（ '＃asdf'）は要素のidでしか動作しません。

<a id="Some_Name" href="#menu_a">Introductie </a>

をし、[次へ]ボタンをテストし、それが私にいくつかのことをやったが、私は、あなたが正確に何をしたいかわからない：ので、あなたのリンクのためのIDを設定する必要があります。そして最後に、あなたのコードは、このしてくださいテストです。

<body> 
<div id="wrapper"> 
    <header> 
     <div id="logo" onclick="window.location.href='https://placeholdit.imgix.net/~text?txtsize=33&txt=50×50&w=50&h=50'"> 
      <img src="img/logo.png" alt="logo" /> 
      <h1>Hartmeting voor fitte mensen</h1> 
     </div> 
    </header> 
    <nav id="menu"> 
     <ul> 
      <li><a href="#menu_a">Introductie </a></li> 
      <li><a href="#menu_b">Het Probleem </a></li> 
      <li><a href="#menu_c">Stappenplan </a></li> 
      <li><a href="#menu_d">Hartmeting </a></li> 
     </ul> 
    </nav> 
    <div id="content"> 
     <article id="menu_a"> 
      <h2>Introductie</h2> 
      <br> 
      <figure> 
       <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250×250&w=250&h=250" alt="Intro Afbeelding" /> 
      </figure> 
      <p>BLA BLA BLA BLA BLA BLA</p> 
     </article> 
     <article id="menu_b"> 
      <h2>Het Probleem</h2> 
      <br> 
      <figure> 
       <img src="img/hetprobleem1.jpg" alt="Eerste Afbeelding" /> 
      </figure> 
      <p>BLA BLA BLA BLA BLA BLA</p> 
     </article> 

     <article id="menu_c"> 
      <h2>Hoe kan mijn hartslag meten?</h2> 
      <br> 
      <figure> 
       <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=250×250&w=250&h=250" alt="Tweede Afbeelding" /> 
      </figure> 
      <p>BLA BLA BLA BLA BLA BLA</p> 
     </article> 
     <article id="menu_d"> 
      <h2>Hart Meten</h2> 
      <br> 
      <figure> 
       <div> 
        <div id="klik_Hart" class="heart"> 
         <h3 id="uitleg">asdfasdf 
         </h3> 
        </div> 
       </div> 
       <br> 
       <br> 
       <br> 
      </figure> 
      <p>BLA BLA BLA BLA BLA BLA</p> 
     </article> 
     <table id="volgorde"> 
      <th> 
       <button class="button" name="previous">Vorige</button> 
      </th> 
      <th> 
       <button class="button" id="next">Volgende</button> 
      </th> 
      <th> 
       <div class="auto_menu"> 
        <input type="checkbox" id="checkbox"> 
        <label for="checkbox">Auto Manual</label> 
       </div> 
      </th> 
     </table> 
     <div id="buffer"></div> 
     <footer> 
      <a href="#wrapper">to the top! </a> 
     </footer> 
    </div> 
    </div> 
    <script> 
    $(document).ready(function() 
    { 
     $('#content').hide(); 
    }); 

    var visible = $('#menu_a').first(); 

    var show_me = function (article) 
    { 

     visible.hide(); 
     visible = article; 
     visible.show(); 
    } 

    $("#menu_a").click(function (event) 
    { 

     var id_of_article = $(this).attr('href'); 
     var the_article = $(id_of_article); 
     show_me(the_article); 
     even.preventDefault(); 
    }); 


    $('#next').click(function (event) 
    { 
     var next = visible.next(); 
     if (next.length != 0) 
     { // is there another article left? 
      show_me(next); 
     } 
     event.preventDefault(); 
    }); 
</script>

出典

2016-11-26 21:02:45

努力いただきありがとうございます！まあ、すべての記事がお互いの下に表示されているわけではありません。コンテンツ領域は空であるか、最初の記事のみを表示する必要があります。そして、私が「次へ」ボタンを押すと、次の記事が表示されるはずです（メニュー項目に従って時系列に表示されます）。 – user7186746

Plsはこのjsfiddleを参照してください：https://jsfiddle.net/va2xeysk/1/なぜそれは最初の記事だけでなく、お互いの下のすべての記事を表示しますか？前のボタンのコードをいくつか追加しました。しかし、次と前の両方が機能しません。どうしてこれなの？ – user7186746

しかし、あなたのコードをテストすると、すべての記事が隠されています。彼らは隠されたdiv id = "content"にあるので –

あなたの前回の記事の次の要素があなたのテーブルです。あなたの記事が最後のものは、あなたの記事IDのリストを作成しているかどうかを確認したい場合：

articleIds=['menu-a', 'menu-b', 'menu-c']

をので、この変更：

$('#next').click(function (event) 
    { 
     var next; 
     if (visible.attr('id') == articleIds[articleIds.length - 1])//article is the last one 
      next = $('#' + articleIds[0]); //come back to first one 
     else 
      next = visible.next(); 
     show_me(next); 
     event.preventDefault(); 
    });

出典

2016-11-25 23:06:32

ブラザー、ありがとう！私はそれを試してみます – user7186746

私はそれがあなたに役立つことを願っています –

visible.attr（ 'id'）なら#contentを置くのですか？次の$ =（ '＃' + articleIds [0]）で＃を変更する必要があります。？私は、このコードは、私が書いたjsコードの最後の2つの段落の代わりに来ると仮定します。私の編集を見てください:)それは良い見えますか？最初にすべての記事を表示してから次の/前のボタンに反応しないため、まだ機能していないためです。 – user7186746

「メモリ」の次の記事のJavascript（Jquery）コード

答えて

関連する問題