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

Question

我创建了一个静态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>

etc

---

对于每个部分，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;
}

我可以为链接到上一个/下一个部分的每个当前/聚焦部分制作"上一个"one_answers"下一个"按钮吗？

到目前为止，我知道正在创建特定的"下一个"one_answers"上一个"按钮，链接如下。

例如，我目前看到的是第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"，它应该会起作用。