0

だから私は申請書を作成しています.9ページの質問があります. 最初は、ページの 1 つが完了するたびに 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/ (この場合、「selected」に別の名前を付けたいと思うでしょう。)

于 2013-04-29T10:26:29.710 に答える