Html 如何制作带有链接的进度条？

所以我创建了一份申请表，我有9页的问题。起初，我有一个进度条，每完成一页，进度条就会被填满1/9。 但我被告知我不能这样做，必须有一种“盒子”系统，我有9个盒子排成一行，每个盒子里都有一个标题，所以这个人想回到3页去改变一些东西，他们可以点击它

---

目前，我在顶部有一个导航栏，它只是一个无序的列表，设置为内联显示，使项目符号不可见，效果很好，所以我尝试使用它，但更改了单词，并将其用作我的导航，但大小不合适，我需要在填写页面时这样做，该部分将变为紫色以表示已完成，而其他部分将保持灰色。

好吧，您实际上不需要进度条，对吗

您可以做的只是将一个类添加到所选项目中，然后相应地设置之后的所有内容的样式：

li {
    background:#aff; /* This is the "already done" colour. */
}

li.selected ~ li {
    background:#f5f5f5; /* This is the "not yet reached" colour. */
}

li.selected {
    background:#5a0; /* This is the "selected" colour. */
}

首先，您的第一个

li

将被授予

当前

课程

下面是一个JSFIDLE示例：

如果要返回到另一个类，可以使用新类：

li {
    background:#aff; /* This is the "already done" colour. */
}

li.selected ~ li {
    background:#f5f5f5; /* This is the "not yet reached" colour. */
}

li.selected {
    /* This is the no longer the "selected" colour. */
}

li.current {
    background:#5ae; /* This is the new "selected" colour. */
}

---

新的JSFIDLE：（在本例中，您可能希望将“selected”命名为不同的名称。）

人们必须完成一个页面才能看到下一个页面的链接吗？这是用PHP处理的吗？是的，他们必须先完成页面，但我希望他们能够随意返回。是的，它是由php处理的，但我不处理php部分，所以如果这是修复它的必要条件，我几乎完蛋了……哦哦哦，我不知道为什么我没有想到这样做……：-It’谢谢你！