Des moyens intelligents CSS pour implémenter les barres obliques CSS

La compatibilité n'est pas prise en compte lors de la résolution de problèmes. Les questions sont sauvages et sans contrainte. Dites simplement ce qui vous vient à l'esprit. S'il y a des propriétés CSS qui ne vous semblent pas familières dans la résolution de problèmes, allez les étudier rapidement. .

Continuez à mettre à jour, continuez à mettre à jour, continuez à mettre à jour, dites des choses importantes trois fois.

8. Solution de changement d'onglet de la barre de navigation CSS pure

Pas besoin Javascript , utilisez la solution pure CSS pour obtenir un changement de barre de navigation similaire à la figure suivante :

La puissance du CSS est le suivant Cela dépasse notre imagination. De manière générale, le changement d'onglet nécessite la mise en œuvre d'un certain script. Voyons comment accomplir la même chose en utilisant CSS.

La difficulté dans la mise en œuvre du changement de tabulation est de savoir comment utiliser CSS pour recevoir les événements de clic de l'utilisateur et opérer sur les nœuds associés. C'est-à-dire :

<li>

Comment recevoir des événements de clic

<li>

Comment faire fonctionner le DOM concerné

Voyons comment utiliser deux méthodes différentes pour répondre aux exigences :

Méthode un : :target Sélecteur de pseudo-classe

Tout d'abord, le problème que nous voulons résoudre est 如何接收点击事件 Ici, la première méthode consiste à utiliser :target pseudo-classe. réception.

:target est une nouvelle pseudo-classe en CSS3 qui peut être utilisée pour sélectionner l'élément cible actuellement actif. Lorsque l'URL comporte le nom d'ancre # à la fin, elle peut pointer vers un élément spécifique du document. L'élément lié est l'élément cible. Il nécessite un identifiant pour correspondre à la cible dans le document.

L'explication est difficile à comprendre. Regardons l'utilisation réelle. Supposons que notre code HTML soit le suivant :

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

Puisque vous souhaitez utiliser , vous avez besoin d'un point d'ancrage HTML et du fragment HTML correspondant au point d'ancrage. La structure ci-dessus devrait donc devenir : :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>

De cette façon, le point d'ancrage dans le <a href="#content1"> ci-dessus correspond à List 1#content1 . L'ancre 2 est la même que la liste 2. <p id="content1">

Ensuite, nous pouvons utiliser pour recevoir l'événement de clic et faire fonctionner le DOM correspondant : :target

#content1,
#content2{
    display:none;
}

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

Dans le code CSS ci-dessus, et #content1 dans la page initiale sont masqués Lorsque l'on clique sur la liste 1 pour déclencher #content2, l'URL de la page changera : href="#content1" .

<li>

les modifications de à www.example.comwww.example.com#content1

<li>

déclencheront ensuite ceci selon les règles CSS , l'élément #content1:target{ } passe de #content1 à display:none, et il en va de même en cliquant sur la liste 2. display:block

Le changement d'onglet est réalisé de cette manière. Bien sûr, en plus du changement de , notre style d'élément content1 content2 doit également changer constamment. À ce stade, nous devons prêter plus d'attention lors de la présentation de la structure DOM. Lorsque li est déclenché. peut le modifier en même temps. #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 接收点击事件，可以得到第二解法。

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!