0

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

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

4

1 回答 1

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/（在这种情况下，您可能希望将“选定”命名为不同的名称。）

于 2013-04-29T10:26:29.710 回答