Home > Article > Web Front-end > Pure CSS navigation bar Tab switching solution
No need for Javascript, use pure CSS solution to achieve navigation bar switching similar to the picture below:
The power of CSS is sometimes beyond our imagination. Tab switching is routine and Language 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:
How to receive click events
How to operate the relevant DOM
Let’s see how to use two different methods to achieve the requirements:
Method 1: :target pseudo-class selector
First, we have to solve The problem is how to receive click events. The first method here is to use the :target pseudo-class to receive.
:target is a new pseudo-class in CSS3 that can be used to select the currently active target element. Of course, the anchor name # at the end of the URL can point to a specific element in 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:
<span style="font-family: verdana, geneva;"><ul class='nav'> <li>列表1</li> <li>列表2</li> </ul> <div>列表1内容:123456</div> <div>列表2内容:abcdefgkijkl</div></span>
Since we want to use :target, we need an HTML anchor point and the HTML fragment corresponding to the anchor point. So the above structure should become:
<span style="font-family: verdana, geneva;"><ul class='nav'> <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>
In this way, the anchor point #content1 in the above corresponds to list 1 Next, we can use :target to receive the click event and operate the corresponding DOM: In the above CSS code, #content1 and #content2 in the page are hidden at the beginning. When list 1 is clicked When href="#content1" is triggered, the URL of the page will change: 1. From www.example.com to www.example.com#content1 2. Next, #content1:target{ } will be triggered According to the CSS rule, the #content1 element changes from display:none to display:block , and the same is true for click list 2. This is how Tab switching is achieved. Of course, in addition to the switching of content1 content2, the style of our li element must also be constantly changing. At this time, we need to pay more attention when laying out the DOM structure. When #content1:target is triggered, we can modify the style of li at the same time. Based on the above HTML, modify it to become the following structure: 仔细对比一下与上面结构的异同,这里我只是将 ul 从两个 content 上面挪到了下面,为什么要这样做呢? 因为这里需要使用兄弟选择符 ~ 。 E~F{ cssRules } ,CSS3 兄弟选择符(E~F) ,选择 E 元素后面的所有兄弟元素 F。 注意这里,最重要的一句话是 E~F 只能选择 E 元素 之后 的 F 元素,所以顺序就显得很重要了。 在这样调换位置之后,通过兄弟选择符 ~ 可以操作整个 .nav 的样式。 上面的 CSS 规则中,我们使用 ~ 选择符,在 #content1:target 和 #content2:target 触发的时候分别去控制两个导航 li 元素的样式。 至此两个问题,1. 如何接收点击事件 与 2. 如何操作相关DOM 都已经解决,剩下的是一些小样式的修补工作。 法二: && 上面的方法通过添加 标签添加页面锚点的方式接收点击事件。 这里还有一种方式能够接收到点击事件,就是拥有 checked 属性的表单元素, 或者 。 假设有这样的结构: 对于上面的结构,当我们点击 单选框表单元素的时候,使用 :checked是可以捕获到点击事件的。 同样用到了兄弟选择符 ~ 这样,当接收到表单元素的点击事件时,可以通过兄弟选择符 ~ 操作它的兄弟元素的样式。 但是,这里有个问题 我们的 Tab 切换,要点击的是<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='nav'>
<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='nav'>
<li>列表1</li>
</ul>
.nav1:checked ~ .nav li {
// 进行样式操作
}