Reine CSS-Navigationsleisten-Tab-Wechsellösung

Kein Javascript erforderlich, verwenden Sie eine reine CSS-Lösung, um eine Navigationsleistenumschaltung ähnlich dem Bild unten zu erreichen:

Manchmal übersteigt die Leistungsfähigkeit von CSS unsere Vorstellungskraft. Im Allgemeinen erfordert das Wechseln von Tabs die Implementierung eines bestimmten Skripts. Sehen wir uns an, wie man mit CSS dasselbe erreicht.

Die Schwierigkeit bei der Implementierung des Tab-Wechsels besteht darin, wie man CSS verwendet, um Benutzerklicks zu empfangen und auf zugehörigen Knoten zu arbeiten. Das heißt:

Wie man Klickereignisse empfängt

Wie man das relevante DOM bedient

Sehen wir uns an, wie man zwei verschiedene Methoden verwendet, um die Anforderungen zu erfüllen:

Methode 1: :target pseudo-class selector

Zuallererst müssen wir das Problem lösen, wie wir Klickereignisse empfangen. In der ersten Methode verwenden wir hier :target pseudo-. Klassenempfang.

:target ist eine neue Pseudoklasse in CSS3, mit der das aktuell aktive Zielelement ausgewählt werden kann. Mit dem Ankernamen # am Ende der URL kann natürlich auf ein bestimmtes Element im Dokument verwiesen werden. Das verknüpfte Element ist das Zielelement. Es ist eine ID erforderlich, die mit dem Ziel im Dokument übereinstimmt.

Die Erklärung ist schwer zu verstehen. Schauen wir uns die tatsächliche Verwendung an:

<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>

Da wir :target verwenden möchten, brauchen wir HTML-Anker und Anker Klicken Sie auf das entsprechende HTML-Fragment. Die obige Struktur sollte also wie folgt aussehen:

<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>

Auf diese Weise entspricht der Ankerpunkt #content1 im obigen Liste 1

<span style="font-family: verdana, geneva;">#content1,
#content2{
    display:none;
}
 
#content1:target,
#content2:target{
    display:block;
}</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>