Question

我创建了一个静态html 与

27节id（s）像这样 - ＆gt;

    <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上手动编写？

抱歉英语不好谢谢！

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”，它应该有效。

在相同的html上创建下一个+上一个按钮，包含很多部分

1 个答案: