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

. Anker 2 ist derselbe wie Liste 2.

Als nächstes können wir :target verwenden, um das Klickereignis zu empfangen und das entsprechende DOM zu bedienen:

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

Der obige CSS-Code #content1 und # im Inhalt2 der ersten Seite ist ausgeblendet. Wenn durch Klicken auf Liste 1 href="#content1" ausgelöst wird, ändert sich die URL der Seite:

1 Von www.example.com zu www.example.com#content1

2. Als nächstes wird die CSS-Regel #content1:target{ } ausgelöst. Das Element #content1 ändert sich von display:none zu display:block, und das Gleiche gilt für das Klicken auf Liste 2.

Tab-Wechsel wird auf diese Weise erreicht. Natürlich muss sich neben dem Wechsel von Inhalt1 und Inhalt2 auch der Stil unseres li-Elements ständig ändern. Zu diesem Zeitpunkt müssen wir beim Auslösen von #content1:target mehr Aufmerksamkeit schenken kann gleichzeitig den Stil von Li ändern.

Ändern Sie es basierend auf dem obigen HTML so, dass es die folgende Struktur erhält:

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

仔细对比一下与上面结构的异同，这里我只是将 ul 从两个 content 上面挪到了下面，为什么要这样做呢？

因为这里需要使用兄弟选择符 ~ 。

E~F{ cssRules } ，CSS3 兄弟选择符(E~F) ，选择 E 元素后面的所有兄弟元素 F。

注意这里，最重要的一句话是 E~F 只能选择 E 元素 之后 的 F 元素，所以顺序就显得很重要了。

在这样调换位置之后，通过兄弟选择符 ~ 可以操作整个 .nav 的样式。

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

上面的 CSS 规则中，我们使用 ~ 选择符，在 #content1:target 和 #content2:target 触发的时候分别去控制两个导航 li 元素的样式。

至此两个问题，1. 如何接收点击事件 与 2. 如何操作相关DOM 都已经解决，剩下的是一些小样式的修补工作。

法二： && 

上面的方法通过添加  标签添加页面锚点的方式接收点击事件。

这里还有一种方式能够接收到点击事件，就是拥有 checked 属性的表单元素，  或者 。

假设有这样的结构：

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

对于上面的结构，当我们点击  单选框表单元素的时候，使用 :checked是可以捕获到点击事件的。

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

同样用到了兄弟选择符 ~

这样，当接收到表单元素的点击事件时，可以通过兄弟选择符 ~ 操作它的兄弟元素的样式。

但是，这里有个问题 我们的 Tab 切换，要点击的是

元素，而不是表单元素，所以这里很重要的一点是，使用  绑定表单元素。看看如下结构：

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

通过使用  包裹一个 

 元素，而  有一个属性 for 可以绑定一个表单元素。

上面的 

 中，有一层  ，里面的 for="li1" 意思是绑定 id 为li1 的表单元素。

label 标签中的 for 定义：for 属性规定 label 与哪个表单元素绑定。

这样改造之后，当我们点击 

 元素的时候，相当于点击了 这个单选框表单元素，而这个表单元素被点击选中的时候，又可以被 :checked 伪类捕获到。

这个时候，我们就可以将页面上的表单元素隐藏，做到点击 

 相当于点击表单：

input{
    display:none;
}

这样，应用到本题目，我们应该建立如下 DOM 结构：

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

使用两个单选框，分别对应两个导航选项，运用上面介绍的 label 绑定表单，:checked 接收点击事件，可以得到第二解法。