Home > Article > Web Front-end > Sample code to achieve Tab page switching effect using CSS_CSS Tutorial_CSS_Web Page Production
Sample code to achieve Tab page switching effect using CSS_CSS Tutorial_CSS_Web Page Production
- ringa_leeOriginal
- 2018-03-20 13:02:371490browse
Recently, when cutting a page, a tab switching part was involved. Because I didn’t want to use js, I thought about whether I could use a pure CSS selector to achieve the switching effect. After searching, there are roughly three ways of writing:
1. Use:hover selector
Disadvantages: The effect is only effective when the mouse is on the element, and the effect of selecting and displaying a certain one by default cannot be achieved
2. Using the anchor point of the a tag + :target selector
Disadvantages: Because the anchor point will scroll the selected element to the top of the page, it needs to be moved every time the position is switched, and the experience is extremely poor.
3. Use the binding relationship between label and radio and the :checked when radio is selected to achieve the effect
Disadvantages: HTML structural elements are more complex
After experiments, it was found that the third method achieves the best effect. So let’s talk about the third implementation method.
The writing method of this method is not fixed. When I checked the information, the various writing methods made me confused. After reading it, I found that the general idea is the same, which is nothing more than the following steps.
Binding label and radio: Needless to say binding id and for attributes
Hide radio button: This method has many uses for you Just use your imagination. The methods I have seen include setting display:none; to hide, setting absolute positioning, setting left to a large negative value, moving it outside the page to achieve the hiding effect, and setting **absolute positioning: use The element is taken out of the document flow, and then opacity: 0; ** is set to transparent to achieve the hidden effect.
Hide redundant tab pages: In the same way as above, you can also set hierarchical relationships through z-index to block each other.
Set the default item: Add the checked="checked" attribute to the default button
Set the selection effect: Use the + selector and ~ to select Use the tool to set the style of the tab page below when the corresponding element is selected to achieve the selected effect
##
/* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
input[type="radio"]:checked+.test-label {
/* 为了修饰存在的边框背景属性 */
border-color: #cbcccc;
border-bottom-color: #fff;
background: #fff;
/* 为了修饰存在的层级使下边框遮挡下方p的上边框 */
z-index: 10;
}
/* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
input[type="radio"]:checked~.tab-box {
/* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
z-index: 5;
}This way you can achieve a tab page switching It works without using any js. Of course, there must be compatibility issues. In actual operation, it is better to use js for tab pages. The following is the code of a small demo. There are many styles mainly to achieve various selection effects. The core code that is actually used to achieve the purpose of selection switching is just a few lines Demo addressCode:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS实现Tab切换效果</title>
<style>
ul {
margin: 0;
padding: 0;
}
.clearfloat {
zoom: 1;
}
.clearfloat::after {
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
.tab-list {
position: relative;
}
.tab-list .tab-itom {
float: left;
list-style: none;
margin-right: 4px;
}
.tab-itom .test-label {
position: relative;
display: block;
width: 85px;
height: 27px;
border: 1px solid transparent;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
line-height: 27px;
text-align: center;
background: #e7e8eb;
}
.tab-itom .tab-box {
/* 设置绝对定位方便定位相对于tab-list栏的位置，同时为了可以使用z-index属性 */
position: absolute;
left: 0;
top: 28px;
width: 488px;
height: 248px;
border: 1px solid #cbcccc;
border-radius: 5px;
border-top-left-radius: 0px;
background: #fff;
/* 设置层级最低方便选中状态遮挡 */
z-index: 0;
}
/* 用绝对定位使按钮脱离文档流，透明度设置为0将其隐藏 */
input[type="radio"] {
position: absolute;
opacity: 0;
}
/* 利用选择器实现 tab切换 */
/* 当radio为选中状态时设置它的test-label兄弟元素的属性 */
input[type="radio"]:checked + .test-label {
/* 为了修饰存在的边框背景属性 */
border-color: #cbcccc;
border-bottom-color: #fff;
background: #fff;
/* 为了修饰存在的层级使下边框遮挡下方p的上边框 */
z-index: 10;
}
/* 当radio为选中状态时设置与它同级的tab-box元素的显示层级 */
input[type="radio"]:checked ~ .tab-box {
/* 选中时提升层级，遮挡其他tab页达到选中切换的效果 */
z-index: 5;
}
</style>
</head>
<body class="clearfloat">
<ul class="tab-list clearfloat">
<li class="tab-itom">
<input type="radio" id="testTabRadio1" class="test-radio" name="tab" checked="checked">
<label class="test-label" for="testTabRadio1">选项卡一</label>
<p class="tab-box">
111111111111
</p>
</li>
<li class="tab-itom">
<input type="radio" id="testTabRadio2" class="test-radio" name="tab">
<label class="test-label" for="testTabRadio2">选项卡二</label>
<p class="tab-box">
2222222222222
</p>
</li>
<li class="tab-itom">
<input type="radio" id="testTabRadio3" class="test-radio" name="tab">
<label class="test-label" for="testTabRadio3">选项卡三</label>
<p class="tab-box">
33333333333333
</p>
</li>
</ul>
</body>
</html>
The above is the detailed content of Sample code to achieve Tab page switching effect using CSS_CSS Tutorial_CSS_Web Page Production. For more information, please follow other related articles on the PHP Chinese website!