1

html と css のみを使用して Web サイトを構築しています。いくつかのチュートリアルを読んで調査を行いましたが、今はある領域で立ち往生しています。ulと を使用してページの上部にメニューを作成し、liその中liにリンクがあります。リンク自体には、リンク以外の情報が含まれています。spanそれらの後にありspan、ユーザーがリンクをクリックした後に表示されるショー情報があります。ページに表示する情報に使用a:focusします。したがって、構造は次のとおりです。 

<ul>
    <li><a href="#" tabindex="1">RESUME
        <span class="resume">
            blah blah blah
        </span></a>
    </li>
    <li><a href="#" tabindex="1">My artwork
        <span class="artwork_area">
            blah blah blah
        </span></a>
    </li>
</ul>

履歴書セクションが とうまく機能しa:focus、ユーザーがクリックした後にのみページに表示されるようにすることは問題ありませんが、そのセクション内にさらにリンクが必要なため、「私のアートワーク」とは同じように機能しません。リンクを他のリンク内にネストすることは許可されていないことはわかっていますが、コードを次のようにするにはどうすればよいですか? 

<ul>
    <li><a href="#" tabindex="1">RESUME
        <span class="resume">blah blah blah</span>
        </a>
    </li>
    <li><a href="#" tabindex="1">My artwork</a><!--notice how the link ends here-->
        <span class="artwork_area">
            <p>blah blah blah
            <a href="assets/images/image1.jpg"><img src="assets/images/large_image1.jpg"/>Pic1</a>
            <a href="assets/images/image2.jpg" ><img src="assets/images/large_image1.jpg"/>Pic2</a>
            </p>
        </span>
    </li>
</ul>

これは私が立ち往生しているところです。リンク内にネストせずにそのセクションを表示する方法がわかりませspanんが、その中に別のリンクをネストすることはできません。私は約 3 週間、html と css を読んで練習しただけなので、まだそれほど精通していません。html と css だけでウェブサイトを作成したいと思っています。より便利で、読み込みがはるかに高速であるためです。現在の様子を説明する短いYouTubeビデオを作成しました。

4

2 に答える 2

2

:target疑似要素を調べる必要があります。このようにして、でコンテンツを非表示にしdivてから、＃記号でidこれにリンクすることができます。idこの例を見てください。jsfiddleを少し台無しにしますが、自分のページで実行するとうまく機能します。

:targetこれは、疑似要素に関する優れた読み物です。CSS-トリック

これがお役に立てば幸いです。

更新 これがより良い例です

于 2012-06-26T20:10:19.957 に答える
1

簡潔な答え

w3schools css セレクター リファレンスをざっと見て、element+elementセレクターの例を示します。

div+p -> Selects all <p> elements that are placed immediately after <div> elements

だから私は次のスタイルを試してみました.2番目の例でうまくいきます

a:focus+span {
   display:block;
}

そしてそれの残りの部分

私はあなたのcssがどのように見えるかを仮定しました - おそらくあなたの質問を編集してこれを示すことができ、あなたの例が完成します。

しかし、あなたが提供したhtmlの例に基づいて、両方のケースで次のように機能します。

<style>
li>span {
    display:none;
}

li>a:focus span {
    display:block;
}

li>a:focus+span {
    display:block;
}
</style>

spanアクション リンク内に入れ子にならないように一貫性を持たせたい場合は、a:focus spanセレクターを削除できます。履歴書のリスト項目は次のようになります。

<li>
    <a href="#" tabindex="1">RESUME</a>
    <span class="resume">blah blah blah</span>
</li>

また、まだ行っていない場合は、メニュー システムのリスト項目要素に共通のクラスmenu-itemを指定して、css をさらに制限することもできます。ここでの意図は、常に最後のリスト項目をOutsideに表示することです。

<style>
li.menu-item>span {
    display:none;
}

li.menu-item>a:focus+span {
    display:block;
}
</style>

...

<ul>
    <li class="menu-item">
        ... Resume 
    </li>
    <li class="menu-item">
        ... My artwork
    </li>
</ul>

<ul>
    <li>
        <a href="#" tabindex="1">Outside</a>
        <span class="resume">outside stuff which is always shown</span>
    </li>
</ul>

最後に 1 つ。メインのアクション リンクが再び非表示になるため、画像アクション リンクの 1 つをクリックすると全体が壊れることに気付きました。私が見る限り、parent-from-childセレクターがないので、この段階ではこれがどのように機能するかわかりません. element+elementとにかく、セレクターがあなたの特定の質問に答えると思います。

于 2012-06-27T05:44:30.953 に答える