html - 在具有很多部分的同一 html 上创建下一个 + 上一个按钮

Question

我创建了一个静态html

27 节 id(s) 像这样 -->

    <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>

...ETC

---

对于每个部分，样式/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的选项吗？

抱歉英语不好谢谢！

Answer 1

jQuery和类似的东西：

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

JS：

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

如果您使用 id "1" 而不是 "001"，它应该可以工作。