CSS clever ways to implement CSS slashes

Do not consider compatibility when solving problems. The questions are wild and unconstrained. Just say whatever comes to mind. If there are CSS properties that you feel are unfamiliar in the problem solving, go and learn about it quickly.

Keep updating, keep updating, keep updating, say important things three times.

8. Pure CSS navigation bar Tab switching solution

No need Javascript, using pure CSS solution, realizes navigation bar switching similar to the picture below:

CSS is sometimes more powerful than we imagine. Generally speaking, tab switching does require a certain script to be implemented. Let’s see how to accomplish the same thing using CSS.

The difficulty in implementing Tab switching is how to use CSS to receive the user's click events and operate on the related nodes. That is:

<li>

How to receive click events

<li>

How to operate the relevant DOM

Let’s take a look at how to use two different methods to achieve the requirements:

Method 1::target Pseudo-class selector

First of all, the problem we have to solve is How to receive click events, here we use the first method :target Pseudo class reception.

:target is a new pseudo-class in CSS3 that can be used to select the currently active target element. When the URL has the anchor name # at the end, it can point to a specific element within the document. The linked element is the target element. It requires an id to match the target in the document.

The explanation is difficult to understand. Let’s look at the actual usage. Suppose our HTML code is as follows:

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

Because you want to use :target, you need an HTML anchor point and the HTML fragment corresponding to the anchor point. So the above structure should become:

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

In this way, the above <a href="#content1"></a> The anchor point #content1 corresponds to list 1 <p id="content1"></p>. Anchor 2 is the same as list 2.

Next, we can use :target to receive the click event and operate the corresponding DOM:

#content1,
#content2{
    display:none;
}

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

The above CSS code, #content1 and #content2 in the initial page are hidden, and will be triggered when list 1 is clickedhref="#content1", the URL of the page will change:

<li>

## changes from www.example.com into www.example.com#content1

<li>

This will be triggered next #content1:target{ } CSS rules, the #content1 element changes from display:none to display:block, and the same is true for click list 2.

#In this way, Tab switching is achieved. Of course, in addition to the switching of content1 content2, our li element style must also continue to change. At this time, we need to pay more attention when laying out the DOM structure. In #content1 When :target is triggered, you can modify the style of li at the same time.

在上面 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=""></label>

上面的方法通过添加 <a></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=""></label> 绑定表单元素。看看如下结构：

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

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

上面的 <li> 中，有一层 <label for="li"></label> ，里面的 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 接收点击事件，可以得到第二解法。

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

The above is the detailed content of CSS clever ways to implement CSS slashes. For more information, please follow other related articles on the PHP Chinese website!