Clevere CSS-Möglichkeiten zur Implementierung von CSS-Schrägstrichen

Kompatibilität wird bei der Lösung von Problemen nicht berücksichtigt. Sagen Sie einfach, was Ihnen bei der Problemlösung nicht vertraut ist .

Aktualisieren Sie weiter, aktualisieren Sie weiter, aktualisieren Sie weiter, sagen Sie wichtige Dinge dreimal.

8. Reine CSS-Navigationsleisten-Tab-Wechsellösung

Keine Notwendigkeit Javascript Verwenden Sie die reine CSS-Lösung, um einen Wechsel der Navigationsleiste ähnlich der folgenden Abbildung zu erreichen:

Die Leistungsfähigkeit von CSS ist wie folgt: Es liegt außerhalb unserer Vorstellungskraft. Im Allgemeinen erfordert das Wechseln der Tabulatortaste 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 die Klickereignisse des Benutzers zu empfangen und auf den zugehörigen Knoten zu arbeiten. Das heißt:

<li>

Wie man Klickereignisse empfängt

<li>

Wie man das relevante DOM bedient

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

Methode Eins: :target Pseudoklassenselektor

Das erste Problem, das wir lösen müssen, ist 如何接收点击事件 Hier besteht die erste Methode darin, :target Pseudoklasse zu verwenden Rezeption.

:target ist eine neue Pseudoklasse in CSS3, mit der das aktuell aktive Zielelement ausgewählt werden kann. Wenn die URL am Ende den Ankernamen # trägt, kann sie auf ein bestimmtes Element im Dokument verweisen. 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: HTML

<ul class=&#39;nav&#39;>
    <li>列表1</li>
    <li>列表2</li>
</ul>
<p>列表1内容:123456</p>
<p>列表2内容:abcdefgkijkl</p>

Da Sie verwenden möchten, benötigen Sie einen HTML-Ankerpunkt und das dem Ankerpunkt entsprechende HTML-Fragment. Die obige Struktur sollte also wie folgt aussehen: :target

<ul class=&#39;nav&#39;>
    <li><a href="#content1">列表1</a></li>
    <li><a href="#content2">列表2</a></li>
</ul>
<p id="content1">列表1内容:123456</p>
<p id="content2">列表2内容:abcdefgkijkl</p>

Auf diese Weise entspricht der Ankerpunkt im obigen <a href="#content1"> der Liste 1 #content1 . Anker 2 ist derselbe wie Liste 2. <p id="content1">

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

#content1,
#content2{
    display:none;
}

#content1:target,
#content2:target{
    display:block;
}

Im obigen CSS-Code sind und #content1 auf der Startseite ausgeblendet. Wenn auf Liste 1 geklickt wird, um #content2 auszulösen, ändert sich die URL der Seite: href="#content1"

<li>

Änderungen von zu www.example.comwww.example.com#content1

<li>

lösen als nächstes dies gemäß den CSS-Regeln aus , ändert sich das #content1:target{ }-Element von #content1 zu display:none, und das Gleiche gilt, wenn Sie auf Liste 2 klicken. display:block

Tab-Wechsel wird auf diese Weise erreicht. Zusätzlich zum Wechsel von muss sich auch unser content1 content2-Elementstil ständig ändern. Zu diesem Zeitpunkt müssen wir beim Auslösen von li mehr Aufmerksamkeit schenken kann gleichzeitig den Stil ändern. #content1:targetli

在上面 HTML 的基础上，再修改一下，变成如下结构：

<p id="content1">列表1内容:123456</p>
<p id="content2">列表2内容:abcdefgkijkl</p>
<ul class=&#39;nav&#39;>
    <li><a href="#content1">列表1</a></li>
    <li><a href="#content2">列表2</a></li>
</ul>

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

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

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

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

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

#content1:target ~ .nav li{
    // 改变li元素的背景色和字体颜色
    &:first-child{
        background:#ff7300;
        color:#fff;
    }
}
#content2:target ~ .nav li{
    // 改变li元素的背景色和字体颜色
    &:last-child{
        background:#ff7300;
        color:#fff;
    }
}

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

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

法二：<input type="radio"> && <label for="">

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

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

假设有这样的结构：

<input class="nav1" type="radio">

<ul class=&#39;nav&#39;>
    <li>列表1</li>
</ul>

对于上面的结构，当我们点击 <input class="nav1" type="radio"> 单选框表单元素的时候，使用 :checked是可以捕获到点击事件的。

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

同样用到了兄弟选择符 ~

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

可以试着点击下面 codepen 中的单选框。

但是，这里有个问题 我们的 Tab 切换，要点击的是<li>元素，而不是表单元素，所以这里很重要的一点是，使用 <label for=""> 绑定表单元素。看看如下结构：

<input class="nav1" id="li1" type="radio">

<ul class=&#39;nav&#39;>
    <li><label for="li1">列表1</label></li>
</ul>

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

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

这样改造之后，当我们点击 <li> 元素的时候，相当于点击了 <input class="nav1" id="li1" type="radio">这个单选框表单元素，而这个表单元素被点击选中的时候，又可以被 :checked 伪类捕获到。

这个时候，我们就可以将页面上的表单元素隐藏，做到点击 <li> 相当于点击表单：

input{
    display:none;
}

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

<p 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>
    <p class="content">
        <p class="content1">列表1内容:123456</p>
        <p class="content1">列表2内容:abcdefgkijkl</p>
    </p>
</p>

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

到此本文结束，如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。

Das obige ist der detaillierte Inhalt vonClevere CSS-Möglichkeiten zur Implementierung von CSS-Schrägstrichen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!