MENU
- input的checked属性(Html+Style)
- 伪元素(Html+Style+JavaScript)
- 激活类(Html+Style+JavaScript)
- vue伪元素
input的checked属性(Html+Style)
前言
代码段创建一个使用HTML和CSS实现的标签式内容切换组件。通过选择不同的标签，可以展示相应的内容。
代码段实现一个简洁的标签切换组件，当用户点击不同的标签时，显示相应的内容。每个标签的样式在选中时会改变，未选中的内容会被隐藏。这个组件在需要多个内容区域的情况下非常有用，比如网页的导航栏、选项卡式的内容展示等。
效果图
Html
<div class="box"> <input id="idRadio1" type="radio" name="option" checked /> <label for="idRadio1"> <div class="tab_bar">Home</div> <div class="content"> Home Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt cumque quasi at veritatis necessitatibus quisquam nobis ipsa, sapiente incidunt ullam maiores, provident impedit eaque libero recusandae neque omnis aperiam? Voluptatibus. </div> </label> <input id="idRadio2" type="radio" name="option" /> <label for="idRadio2"> <div class="tab_bar">Blog</div> <div class="content"> Blog Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia magnam eius vel distinctio a odit tempore! Odit libero voluptatibus accusamus placeat, nobis enim quo ratione nostrum nesciunt commodi, sit voluptatum. Repudiandae alias consequuntur praesentium iure eos nesciunt fuga iste. Natus libero cum quidem commodi ipsam magni, nobis laudantium eum quae error velit sed accusamus voluptatem alias earum incidunt temporibus dolorem. </div> </label> <input id="idRadio3" type="radio" name="option" /> <label for="idRadio3"> <div class="tab_bar">Shop</div> <div class="content"> Shop Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vitae sequi recusandae unde dolorum eum iure ipsam quae nihil deserunt facilis omnis doloribus illum similique sunt, corporis minus nemo quaerat est? Iste blanditiis nulla culpa, quidem, facere explicabo beatae enim assumenda aspernatur nemo incidunt animi quis ab esse laudantium impedit sed ipsam fuga molestias? Quibusdam pariatur aliquam, explicabo esse vero incidunt! Aspernatur suscipit quidem sunt at in! Officia, quas blanditiis aut magnam quo harum dignissimos, et perspiciatis similique dolorem quaerat dolore placeat fuga obcaecati natus quam deserunt maiores eius accusamus praesentium. </div> </label> <input id="idRadio4" type="radio" name="option" /> <label for="idRadio4"> <div class="tab_bar">News</div> <div class="content"> News Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem earum quo aspernatur, facere nobis impedit accusantium adipisci. Minima harum, libero pariatur, natus nulla molestiae sit ex, error dolores iusto ipsam. Mollitia nisi molestiae nemo voluptate praesentium suscipit, impedit repudiandae at ratione architecto rerum? Quos, expedita quod. Voluptas molestiae, molestias ipsam ad laudantium amet eveniet facilis fuga perferendis similique dignissimos illum. Iure ea sit, dolorem sed quos, vel assumenda sint distinctio iusto facere, quasi mollitia! Provident magni harum nemo rem expedita autem quaerat in ea enim placeat assumenda, unde aut similique! Ullam, distinctio. Ea optio perferendis, provident rem iste eveniet molestias consectetur mollitia in itaque iure explicabo dolorem autem, laudantium ducimus cum libero aut nihil ut minus eligendi. Officia, iste laboriosam. </div> </label> </div>
1、
<div class="box">是一个包含整个组件的容器。
2、<input type="radio" />是一系列的单选按钮，用于选择不同的标签。这些按钮隐藏，并通过CSS与标签和内容关联。
3、<label>每个标签和其对应的内容都被包含在一个<label>标签中，点击时会触发关联的单选按钮。
4、<div class="tab_bar">是每个标签的可视部分，显示为用户点击的选项，如“Home”、“Blog”等。
5、<div class="content">是对应于每个标签的内容部分，默认情况下隐藏，只有选中的标签对应的内容会被显示。
Style
body { width: 100%; height: 100vh; margin: 0; padding: 28px; box-sizing: border-box; background-color: #a17a7a; .box { position: relative; display: flex; >input { display: none; } >input:checked+label .tab_bar { background-color: rgb(243, 240, 58); color: #333333; } >input:checked+label .content { display: block; z-index: 1; } >label { .tab_bar { padding: 10px; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.5); color: #ffffff; cursor: pointer; transition: 0.25s; } .content { width: 100%; position: absolute; top: 50px; left: 0; padding: 10px; box-sizing: border-box; background-color: #ffffff; box-shadow: 0px 0px 6px #333333 inset; border-radius: 2px; color: #333333; display: none; z-index: 0; } } >label:nth-child(2)>.tab_bar { border-top-left-radius: 2px; border-bottom-left-radius: 2px; } >label:last-child>.tab_bar { border-top-right-radius: 2px; border-bottom-right-radius: 2px; } } }
body设置页面的基本样式，宽度和高度为100%，背景颜色为浅棕色。
.box是整个标签组件的容器，设置为相对定位和水平排列。
input[type="radio"]所有的单选按钮都被隐藏(display: none;)。
input:checked + label .tab_bar当单选按钮被选中时，关联的标签样式会改变，背景颜色变为黄色，文字颜色变为深灰色。
input:checked + label .content当单选按钮被选中时，关联的内容部分会被显示(display: block;)，并且设置较高的层级(z-index: 1;)。
.tab_bar标签的基础样式，设置背景颜色、文字颜色、内边距、边框等属性，并且增加鼠标悬停时的样式过渡效果。
.content内容部分的基础样式，设置宽度、位置、内边距、背景颜色、阴影效果、圆角边框等属性。默认情况下隐藏(display: none;)，仅在选中状态下显示。
nth-child(2)和last-child通过选择器调整标签的圆角，使得第一个和最后一个标签有不同的边框圆角样式，增强视觉效果。
伪元素(Html+Style+JavaScript)
效果图
html
代码
<div class="card">
<div class="tab_bar">
<div class="item" onclick="handleTabBar(this)">tabBar1</div>
<div class="item" onclick="handleTabBar(this)">tabBar2</div>
<div class="item" onclick="handleTabBar(this)">tabBar3</div>
</div>
<div class="content">
<div class="item">
<h2>Tab1</h2>
<p>Content for Tab 1.</p>
</div>
<div class="item">
<h2>Tab2</h2>
<p>Content for Tab 2.</p>
</div>
<div class="item">
<h2>Tab3</h2>
<p>Content for Tab 3.</p>
</div>
</div>
</div>
解析
1、整个代码块的外层是一个
<div>标签，类名为card，表示这是一个卡片样式的容器。
2、tab_bar部分包含三个div元素，每个div元素都具有item类，并且每个div元素有一个onclick事件，当用户点击时，会调用handleTabBar(this)函数。
2.1、tabBar1、tabBar2和tabBar3是三个不同的标签，每个标签都会显示不同的内容。
3、content部分也包含了三个div元素，每个div元素都具有item类，对应不同的标签页内容。
style
代码
.card {
padding: 8px;
box-sizing: border-box;
background-color: #ffffff;
box-shadow: 0px 0px 2px 2px #fafad2;
border-radius: 4px;
.tab_bar {
display: flex;
padding-bottom: 8px;
box-sizing: border-box;
border-bottom: 1px solid #e1e1e1;
.item {
padding: 4px 8px;
box-sizing: border-box;
cursor: pointer;
}
.item:not(:first-child) {
margin-left: 6px;
}
.active {
position: relative;
color: #409eff;
transition: color 0.3s ease;
}
.active::after {
content: '';
position: absolute;
width: 68%;
height: 3px;
left: 50%;
bottom: -2px;
transform: translateX(-50%);
background-color: #409eff;
border-radius: 2px;
}
}
.content {
margin-top: 8px;
.item {
display: none;
h2 {
margin: 0;
}
p {
margin: 0;
margin-top: 4px;
}
}
}
}
解析
1、
.card定义卡片的基本样式，包括内边距、背景色、阴影效果和边框圆角。
2、.tab_bar是标签栏的样式，使用display: flex;使其成为一个水平排列的布局。每个.item元素有内边距，并且设置鼠标悬停时的样式cursor: pointer;表明它是可点击的。
3、.item:not(:first-child)定义非第一个item的左边距，使其与前一个元素有一定的间隔。
4、.active类表示当前激活的标签，改变文字颜色，并添加一个下划线，表示当前激活的状态。
5、.content .item隐藏所有内容，除非被激活。
JavaScript
代码
runInit();
function handleTabBar(e) {
const itemElTabBar = document.querySelectorAll('.tab_bar .item');
const itemElContent = document.querySelectorAll('.content .item');
itemElTabBar.forEach((item, i) => {
if (item === e) {
e.classList.add('active');
itemElContent[i].style.display = 'block';
} else {
item.classList.remove('active');
itemElContent[i].style.display = 'none';
}
});
}
function runInit() {
const itemElTabBar = document.querySelectorAll('.tab_bar .item');
const itemElContent = document.querySelectorAll('.content .item');
itemElTabBar[0].classList.add('active');
itemElContent[0].style.display = 'block';
}
解析
1、runInit()函数在页面加载时立即运行，初始化第一个标签页，使其显示为激活状态。
2、handleTabBar(e)函数在用户点击任意一个标签时触发。
2.1、itemElTabBar和itemElContent分别获取.tab_bar和.content下的所有item元素。
2.2、遍历所有的item元素，检查当前点击的item是否与遍历中的item相同。
2.2.1、如果是相同的，将其设置为激活状态(添加active类)，并显示对应的内容。
2.2.2、如果不是相同的，则移除active类，并隐藏对应的内容。
激活类(Html+Style+JavaScript)
效果图
概述
代码段实现一个简单的图片展示和切换功能，用户可以通过点击下方的缩略图来更改上方的大图显示。代码主要由HTML结构、CSS样式和JavaScript交互逻辑组成。
html
<div class="box"> <div class="back_img"></div> <ul class="list"> <li class="item"> <img class="active" src="../../image/2_.jpg" alt=""> </li> <li class="item"> <img src="../../image/5_.jpg" alt=""> </li> <li class="item"> <img src="../../image/10_.jpg" alt=""> </li> <li class="item"> <img src="../../image/3_.jpg" alt=""> </li> <li class="item"> <img src="../../image/1_.jpg" alt=""> </li> </ul> </div>
1、
<div class="box">是整个组件的容器，包含大图显示区域和缩略图列表。
2、<div class="back_img"></div>用于显示大图的区域，初始状态下没有内容，背景图像会通过CSS设置。
3、<ul class="list">是缩略图列表，包含多个缩略图供用户选择。
3.1、<li class="item">列表项，每个项包含一张缩略图。
3.2、<img>实际的缩略图图片。
3.3、第一张图片具有class="active"类，表示默认选中的状态，对应显示在大图区域。
HTML结构简单明了，清晰地分隔大图显示区域和缩略图列表，方便后续样式和交互的实现。
style
* { margin: 0px; padding: 0px; box-sizing: border-box; } body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: linear-gradient(to bottom, pink, skyblue); .box { width: 680px; .back_img { height: 500px; background-image: url('../../image/2_.jpg'); background-repeat: no-repeat; background-size: 100% 100%; box-shadow: 0px 0px 1px 2px rgba(255, 165, 0, 1); border-radius: 4px; transition: all 1s; } .list { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; margin-top: 18px; list-style: none; gap: 16px; .item { flex: 1; height: 118px; img { width: 100%; height: 100%; box-shadow: 0px 0px 1px 2px rgba(68, 68, 68, 0.4); border-radius: 4px; cursor: pointer; } img.active { box-shadow: 0px 0px 1px 2px rgba(255, 165, 0, 1); } } } } }
全局样式*
1、margin: 0px;和padding: 0px;清除所有元素的默认外边距和内边距，保证样式的一致性。
2、box-sizing: border-box;设置盒模型计算方式，元素的宽高包括内边距和边框，方便尺寸控制。
body样式
1、width: 100vw;和height: 100vh;设置视口宽高为 100%，充满整个浏览器窗口。
2、display: flex;使用Flexbox布局。
3、justify-content: center;和align-items: center;将内容在水平方向和垂直方向居中对齐。
4、background: linear-gradient(to bottom, pink, skyblue);设置从上到下的线性渐变背景色，颜色从粉色过渡到天蓝色。
.box容器样式
1、width: 680px;设置容器的宽度。
.back_img
1、height: 500px;设置高度。
2、background-image: url('../../image/2_.jpg');设置初始背景图像，与第一张缩略图对应。
3、background-repeat: no-repeat;防止背景图像重复。
4、background-size: 100% 100%;让背景图像充满整个容器并拉伸到容器尺寸。
5、box-shadow: 0px 0px 1px 2px rgba(255, 165, 0, 1);添加橙色的外阴影，增加层次感。
6、border-radius: 4px;设置圆角，增加柔和感。
7、transition: all 1s;添加过渡效果，使背景图像更换时有平滑的过渡。
.list
1、display: flex;使用Flexbox布局。
2、justify-content: space-between;在主轴(水平)方向上均匀分布子元素。
3、align-items: center;在交叉轴(垂直)方向上居中对齐。
4、margin-top: 18px在顶部添加间距，与大图区域分隔开。
5、list-style: none;去除列表默认样式。
6、gap: 16px;设置子元素之间的间距。
.item
1、flex: 1;每个缩略图项平均分配剩余空间，保证等宽。
2、height: 118px;设置高度。
img
1、width: 100%;和height: 100%;让图片充满父容器。
2、box-shadow: 0px 0px 1px 2px rgba(68, 68, 68, 0.4);添加灰色的外阴影。
3、border-radius: 4px;设置圆角。
4、cursor: pointer;当鼠标悬停时显示指针，提示可点击。
img.active
1、box-shadow: 0px 0px 1px 2px rgba(255, 165, 0, 1);为选中的缩略图添加橙色的外阴影，突出显示。
CSS样式通过精心设计，实现良好的布局和视觉效果，但需要注意的是，嵌套语法需要借助Sass等CSS预处理器进行编译。如果在浏览器中直接使用，需要将嵌套的样式展开为标准的CSS语法。
JavaScript
runInit(); function runInit() { const backImg = document.querySelector('.back_img'); const elList = document.querySelectorAll('.item > img'); let isClick = true; elList.forEach(item => { item.onclick = ({ target }) => { if (isClick) { backImg.style.backgroundImage = `url(${target.src})`; elList.forEach(items => items.classList.remove('active')); target.classList.add('active'); isClick = false; setTimeout(() => isClick = true, 1000 * 1); } }; }); }
1、
runInit();调用初始化函数，开始执行交互逻辑。
2、function runInit() { ... }定义初始化函数。
2.1、const backImg = document.querySelector('.back_img');获取大图显示区域的DOM元素，方便后续修改其背景图像。
2.2、const elList = document.querySelectorAll('.item > img');获取所有缩略图图片的DOM元素集合，便于为每个缩略图添加点击事件。
2.3、let isClick = true;定义一个布尔值变量，用于控制点击节奏，防止过于频繁的点击操作。
3、为每个缩略图添加点击事件监听器。
3.1、elList.forEach(item => { ... });遍历每个缩略图元素，为其添加点击事件。
3.2、item.onclick = ({ target }) => { ... };当缩略图被点击时触发的事件处理函数。
3.3、if (isClick) { ... }检查isClick是否为true，防止在短时间内多次触发点击事件。
3.4、backImg.style.backgroundImage = 'url(' + target.src + ');'将大图区域的背景图像设置为被点击的缩略图的src，实现大图切换。
3.5、elList.forEach(items => items.classList.remove('active'));移除所有缩略图的active类名，取消选中状态。
3.6、target.classList.add('active');为当前被点击的缩略图添加active类名，突出显示选中状态。
3.7、isClick = false;将isClick设置为false，防止在短时间内再次触发点击事件。
3.8、setTimeout(() => isClick = true, 1000 * 1);
3.8.1、使用setTimeout在1秒后将isClick重置为true，允许再次点击。
3.8.2、这种方式实现简单的节流效果，防止用户过于频繁地切换图片。
JavaScript部分通过简单的事件监听和DOM操作，实现点击缩略图更换大图的交互效果。同时，使用一个简单的节流机制，避免过于频繁的点击操作导致的潜在问题。
vue伪元素
html
<div class="tab_bar">
<div
:class="{
item: true,
active: item.id === activeTabBar ? true : false
}"
v-for="item in tabBarList"
:key="item.id"
@click="handleTabBar(item)"
>
{{ item.title }}
</div>
</div>
style
.tab_bar {
width: 100%;
display: flex;
border-bottom: 1px solid #a8a8a8;
.item {
position: relative;
padding: 8px;
cursor: pointer;
}
.item:not(:first-child) {
margin-left: 8px;
}
.active {
position: relative;
color: #409eff;
transition: color 0.5s ease;
}
.active::after {
content: '';
position: absolute;
width: 58%;
height: 3px;
left: 50%;
bottom: -1px;
transform: translateX(-50%);
background-color: #409eff;
}
}
JavaScript
export default {
name: 'tabBar',
data() {
return {
activeTabBar: 1,
tabBarList: [
{ id: 1, title: '正在开班' },
{ id: 2, title: '已结束班级' },
{ id: 3, title: '全部班级' }
]
};
},
methods: {
handleTabBar(row = {}) {
this.activeTabBar = row.id;
}
}
};
