htmlradio添加切换事件css中的“点击事件”
项⽬开发中要给dom添加点击事件可能都会想到⽤js来实现，但是某些场景下使⽤css来实现会更加优雅，下⾯进⼊正题实现思路
对于原⽣的dom，能够响应⿏标点击的惟input 框的checkbox 和 radio，可以利⽤他们来实现css中的点击效果
简单的案例
下⾯我要实现为 id为box 的盒⼦添加⼀个点击效果，当点击后颜⾊变为蓝⾊
<style>
#box{
background-color: red;
width: 100px;
height: 100px;
}
#box label{
display: block;
width: 100%;
height: 100%;
}
/* 添加点击后的样式 */
#toggler:checked + #box{
background-color: blue;
}
/* 将按钮隐藏 */
#toggler{
display: none;
}
</style>
<body>
<!--这个input相当于⼀个开关-->
<input type="checkbox"id="toggler"/>
<div id="box">
<label for="toggler"></label>
</div>
</body>
总结：
1. 利⽤input框的checked来响应⿏标的点击
2. 利⽤label 标签来关联input 和其他dom元素
3. 利⽤ + 相邻兄弟选择器 或者 ~ 兄弟选择器，选中需要改变样式的元素，并编写改变的样式
4. 最后将input 隐藏起来
注意：
1. 当你要为多个按钮绑定⼀个点击事件时，可以使⽤ radio
2. ⽬标元素必须定义在input同级dom元素，或者同级dom的⼦元素下，要不然⽆法使⽤ + & ~ 来选中
3. css点击事件只能处理样式改变
下⾯案例使⽤ radio 来做点击效果
<style>
#box{
background-color: red;
width: 100px;
height: 100px;
}
#box label{
display: block;
width: 100%;
height: 100%;
}
.icons label{
display: inline-block;
width: 10px;
height: 10px;
margin-right:5px;
}
.icons label:last-child{
margin-right: 0
}
/* 添加点击后的样式 */
#toggler1:checked ~ #box{
background-color: red;
}
#toggler1:checked ~ #box{
background-color: green;
}
#toggler2:checked ~ #box{
background-color: yellow;
}
/*也可以为label添加点击后的样式*/
#toggler1:checked ~ .icons label:nth-child(1){
/*TODO*/
}
#toggler2:checked ~ .icons label:nth-child(2){
/*TODO*/
}
#toggler3:checked ~ .icons label:nth-child(3){
/*TODO*/
}
/* 将按钮隐藏 */
input[type="radio"]{
display: none;
}
</style>
<body>
<!--这个input相当于⼀个开关-->
<input type="radio"id="toggler1"/>
<input type="radio"id="toggler2"/>
<input type="radio"id="toggler3"/>
<div id="box">
<label for="toggler"></label>
</div>
<div class="icons">
<label for="toggler1">red</label>
<label for="toggler2">green</label>
<label for="toggler3">yellow</label>
</div>
</body>
以上的案例，可以⽤在轮播图的制作，或是当个按钮的点击，可以快速实现某个元素的点击效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。