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

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

1 个答案: