html - 如何制作带链接的进度条？

Question

所以我正在创建一个申请表，我有 9 页的问题。起初，我有一个进度条，每次完成其中一页时，进度条就会填满 1/9。 但我被告知我不能那样做，并且必须有一种“盒子”系统，其中我有 9 个盒子，每个盒子都有一个标题，所以这个人想要返回 3 页来改变一些东西，他们只需点击它即可。

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

Answer 1

好吧，你真的不需要进度条，对吧？

您可以做的是简单地向所选元素添加一个类，然后相应地设置所有内容的样式:

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 将被赋予 current 类。

这是一个 JSFiddle 示例:http://jsfiddle.net/KkQb3/1/

如果你想回到另一个你可以使用一个新类:

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. */
}

新的 JSFiddle:http://jsfiddle.net/KkQb3/2/ (在这种情况下，您可能希望将“selected”命名为不同的名称。)