0

で静的htmlを作成します

このような 27 のセクション ID -->

    <section id="001">
    <h1>Chap 1 Summary</h1>
    /* lil content */
    </section>

    <section id="002">
    <h1>Chap 2 Summary</h1>
    /* lil content */
    </section>

    <section id="003">
    <h1>Chap 3 Summary</h1>
    /* lil content */
    </section>

...等

各セクションの style/css は次のようになります。

#001, #002, #003 ---go on {
    background-color: #97CACD;
    margin-left: auto ;
    margin-right: auto ;
    width: 100%;
    height: 500px;
    text-align: center;
    padding: 20px;
}

前/次のセクションにリンクする現在の/フォーカスされたセクションごとに「前へ」および「次へ」ボタンを作成できますか?

これまでのところ、このようにリンクされた特定の「次へ」および「前へ」ボタンを作成していることを知っています。

たとえば、現在、セクション #002 が表示されています。

    <section id="002">
    <h1>Chap 2 Summary</h1>

    /*---content---*/


    <div id="button_previous"><a href="#001">Previous</a></div> 
     /* to go back to section #001*/

   <div id="button_next"><a href="#003">Next</a></div> 
    /*to go next to section #003 */

    </section>

^しかし、それには、すべてのセクションにターゲットを絞ったhrefリンクを手動で書き込む必要があります. href に手動で書き込む必要のない他のオプションはありますか?

下手な英語でごめんなさいありがとう！

4

1 に答える 1

0

jQuery など:

HTML: <a class="prev-link">prev</a>

JS:

$('.prev-link').click(function() {
    location.hash = '#' + (parseInt($(this).parent().attr('id')) - 1);
});

"001" の代わりに ID "1" を使用すると機能するはずです。

于 2013-06-27T18:18:23.273 に答える