Pure CSS ナビゲーション バー タブ切り替えソリューション

Javascript は必要ありません。純粋な CSS ソリューションを使用して、下の図のようなナビゲーション バーの切り替えを実現します。

CSS のパワーは、日常的であり、言語の想像を超えている場合があります。特定のスクリプトを実装する必要があります。 CSS を使用して同じことを実現する方法を見てみましょう。

タブ切り替えの実装で難しいのは、CSS を使用してユーザーのクリック イベントを受け取り、関連するノードを操作する方法です。つまり:

クリック イベントの受信方法

​​ 関連する DOM の操作方法

要件を達成するために 2 つの異なる方法を使用する方法を見てみましょう:

方法 1: :target pseudo-class selector

まず、解決する必要があります。問題は、クリック イベントを受信する方法です。最初の方法は、:target 疑似クラスを使用して受信することです。

:target は、現在アクティブなターゲット要素を選択するために使用できる CSS3 の新しい疑似クラスです。もちろん、URL の末尾にあるアンカー名 # は、ドキュメント内の特定の要素を指すことができます。リンクされた要素がターゲット要素です。ドキュメント内のターゲットと一致するには ID が必要です。

説明がわかりにくいので、実際の使い方を見てみましょう。 HTML コードが次のとおりであるとします。 :target を使用したいので、HTML アンカー ポイントとアンカーに対応する HTML フラグメントが必要です。ポイント。したがって、上記の構造は次のようになります:

<span style="font-family: verdana, geneva;"><ul class=&#39;nav&#39;>
    <li>列表1</li>
    <li>列表2</li>
</ul>
<div>列表1内容:123456</div>
<div>列表2内容:abcdefgkijkl</div></span>

このように、上記 のアンカー ポイント #content1 はリスト 1

次に、:target を使用してクリック イベントを受け取り、対応する DOM を操作できます:

<span style="font-family: verdana, geneva;"><ul class=&#39;nav&#39;>
    <li><a href="#content1">列表1</a></li>
    <li><a href="#content2">列表2</a></li>
</ul>
<div id="content1">列表1内容:123456</div>
<div id="content2">列表2内容:abcdefgkijkl</div></span>

<span style="font-family: verdana, geneva;"><div id="content1">列表1内容:123456</div>
<div id="content2">列表2内容:abcdefgkijkl</div>
<ul class=&#39;nav&#39;>
    <li><a href="#content1">列表1</a></li>
    <li><a href="#content2">列表2</a></li>
</ul></span>

<span style="font-family: verdana, geneva;">#content1:target ~ .nav li{
    // 改变li元素的背景色和字体颜色
    &:first-child{
        background:#ff7300;
        color:#fff;
    }
}
#content2:target ~ .nav li{
    // 改变li元素的背景色和字体颜色
    &:last-child{
        background:#ff7300;
        color:#fff;
    }
}</span>

<input class="nav1" type="radio">
 
<ul class=&#39;nav&#39;>
    <li>列表1</li>
</ul>

.nav1:checked ~ .nav li {
  // 进行样式操作
}

<input class="nav1" id="li1" type="radio">
 
<ul class=&#39;nav&#39;>
    <li><label for="li1">列表1</label></li>
</ul>

input{
    display:none;
}

<div class="container">
    <input class="nav1" id="li1" type="radio" name="nav">
    <input class="nav2" id="li2" type="radio" name="nav">
    <ul class=&#39;nav&#39;>
        <li class=&#39;active&#39;><label for="li1">列表1</label></li>
        <li><label for="li2">列表2</label></li>
    </ul>
    <div class="content">
        <div class="content1">列表1内容:123456</div>
        <div class="content1">列表2内容:abcdefgkijkl</div>
    </div>
</div>