javascriptのないHTML/CSSスライドショー

Question

まずは私の大学のプロジェクトに関する質問ですので、私は直接の回答ではなくポインタを探しています。正しい方向に私を指し示すリンクは本当に感謝します。

javascriptを使用せずに、CSS/HTMLのみを使用してスライドショーを作成しようとしています。要件は次のとおりです。

• いいえJavscript。 URLハッシュ（#foo）の変化（それはのidをスライドを指す。
• 各スライドは、ユニークな事前に定義されたIDを持つことになります遷移がトリガされます
• 。

私はjavascriptをせずにスライドショーのための多くの例を見つけましたが、それらのひとつひとつの1はそれを達成するためのリンクを使用し、ここで疑問があるので：。？？ I：

私はIDを使用すると、自分のIDを使用して、/非表示要素を表示する方法があることを達成することができますどのように注意

SOのことを知っているルールでは回答の代わりに投稿リンクが表示されないようにしていますが、このケースでは学習するリソースがあるかどうかを知りたいと思います。ありがとう！

Answer 1

私はうまくいくと思いますが、:target疑似要素を使って、あなたがしたいことを達成することができます。隠されたコンテンツのスライドのリストを持っており、:targetに基づいて、それを表示するとうまくいくでしょう。これは私がこれまでに出てきたものです。

リンクを使用せずに達成する方法がわかりませんが、これは左右に移動するだけですが、:target、CSS、JavaScriptは使用していません。

section {background-color: #ccf; border: 5px solid #99f; display: none; line-height: 500px; width: 500px; margin: 15px auto; text-align: center;} 
 
section:target {display: block;} 
 

 
#nav, 
 
#nav li {display: block; margin: 0; padding: 0; list-style: none; text-align: center;} 
 
#nav li {display: inline-block;} 
 
#nav li a {display: block; text-decoration: none; padding: 3px; margin: 5px; border: 1px solid #99f; border-radius: 5px;} 
 
#nav li a:focus, 
 
#nav li a:active {background-color: #ccf; color: #fff;}

<ul id="nav"> 
 
    <li><a href="#slide-1">Slide 1</a></li> 
 
    <li><a href="#slide-2">Slide 2</a></li> 
 
    <li><a href="#slide-3">Slide 3</a></li> 
 
    <li><a href="#slide-4">Slide 4</a></li> 
 
    <li><a href="#slide-5">Slide 5</a></li> 
 
</ul> 
 
<div id="slides"> 
 
    <section id="slide-1">This is Slide 1</section> 
 
    <section id="slide-2">This is Slide 2</section> 
 
    <section id="slide-3">This is Slide 3</section> 
 
    <section id="slide-4">This is Slide 4</section> 
 
    <section id="slide-5">This is Slide 5</section> 
 
</div>

それがどのように見えるかをチェックアウトするフルスクリーンプレビューを使用してください。