如何製作帶有鏈接的進度條？

所以我創建了一個申請表，我有9頁的問題。起初，我有一個進度條，每次完成一頁時就會填滿1/9。但我被告知我不能這樣做，並且必須有一個「盒子」系統，我在每個盒子中有一個帶有標題的行中有9個盒子，所以這個人想要回3頁來改變一些東西，他們可以點擊它。如何製作帶有鏈接的進度條？

目前，我在頂部有一個導航欄，它是公正的和無序的列表，設置爲內聯顯示，子彈不可見，並且工作得很好，所以我試圖使用它，但改變單詞，並將它用作我的導航，但它不是正確的大小，當頁面填充完畢後，我需要做到這一點，該部分將變成紫色以表示已完成，而其他部分保持灰色。

來源

2013-04-29 Daniel Thomas

人們是否必須先完成一頁才能看到下一頁的鏈接？這是用PHP處理的嗎？ – 2013-04-29 09:49:48

是的，他們必須先完成頁面，但我希望他們能夠隨時回頭。是的，它正在處理的PHP，但我不處理PHP的一部分，所以如果這是修復它的基本要求，我很擰.... – 2013-04-29 09:54:01

那麼，你真的不需要進度條吧？

你可以做的就是簡單的類添加到所選的項目，然後款式應有盡有之後相應：

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-29 10:26:29

ooooooooooh，我不知道爲什麼我沒有想到這樣做... ：-S 謝謝！ – 2013-04-29 10:29:02

如何製作帶有鏈接的進度條？

回答

相關問題