JavaScriptなしでCSSのアクティブパネルを強調表示します

Question

私はこれに似たものを構築しています - http://www.impressionwebs.com/demo-files/content-switcher/content-switcher.html

JavaScript -Pure CSSを使用せずに、ナビゲーションに現在のパネルをどのように表示できるかについて、誰かがアイデアを持っているかどうか疑問に思いました。

私はそれが不可能であることはかなり腹を立てていますが、とにかく聞いていると思いました。

明確にするために...
このページのリンクをクリックすると、 http://www.impressionwebs.com/demo-files/content-switcher/content-switcher-javascript.html ハイライトでクリックしたリンク どのパネルを見ているかをユーザーに通知する。それが私がCSSでやりたいことです。

Answer 1

信じられないかもしれませんが、それは本当にトリッキーです。これにより、開始する必要があります。 http://thinkvitamin.com/design/css/how-to-create-a-valid-non-javascript-lightbox/ キービットはこの引用でキャプチャされます：

ID属性とその仕組みを使用して、同じページの要素にリンクすることを知っていると確信しています。ただし、ページから隠されている要素にリンクすると、その要素にジャンプするウィンドウとは対照的に、要素が「引っ張られる」ことを知らなかったかもしれません。

したがって、基本的には、すべてのスライドをページから外してから、番号付きのリンクを使用してそれらを視界に引き込むことになります。あなたのユースケースは、ページの残りの部分を暗くする必要がないので、彼女がしているものよりも少し単純でなければなりません。

Answer 2

あなたがする必要があるのは、固定サイズと「オーバーフロー」プロパティを隠したコンテナ内にスライドするために必要なものを隠すことです。次に、この容器の内部では、「ディスプレイ」がコンテナと同じものをブロックしてサイズに設定したアンカー要素のリスト内に「スライド可能」コンテンツを配置します。ページ上のリンクから、リスト内のアンカーの1つを呼び出すと、特派員のアンカー名を持つ要素が自動的に表示されます。