前段时间做了一个用css做的图片切换。
我们先来看下html结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<input type="radio" name="btn" id="btn1" class="btn1" checked/>
<input type="radio" name="btn" id="btn2" class="btn2"/>
<input type="radio" name="btn" id="btn3" class="btn3"/>
<!--首先我们要先设置几个单选按钮，要注意标签的位置，不能乱-->
<br />
<!--一个单选按钮设置两个label，一个放在左边，一个放在右边-->
<!--左边label-->
<label for="btn1" class="lb1-1">btn1-1</label>
<label for="btn2" class="lb2-1">btn2-1</label>
<label for="btn3" class="lb3-1">btn3-1</label>
<!--中间是图片，这里用div代替-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<!--右边label-->
<label for="btn1" class="lb1-2">btn1-2</label>
<label for="btn2" class="lb2-2">btn2-2</label>
<label for="btn3" class="lb3-2">btn3-2</label>
</body>
</html>
再看下CSS样式：
这里设置了div，跟label的CSS样式：
div{
display: inline-block; /*将div变成块级行内元素*/
width: 200px;
height: 200px;
}
.box1{
background: #000;
}
.box2{
background: #008000;
}
.box3{
background: #ff0000;
}
label{
padding: 10px;
background: #ffd700;
}
然后再单选按钮input被checked时触发的效果：
/*按钮显示开始*/
/*再单选按钮input被checked时触发label*/
.btn1:checked~.lb2-2{
background: #0000ff;
}
.btn2:checked~.lb1-1{
background: #0000ff;
}
.btn2:checked~.lb3-2{
background: #0000ff;
}
.btn3:checked~.lb2-1{
background: #0000ff;
}
.btn3:checked~.lb4-2{
background: #0000ff;
}
.btn4:checked~.lb3-1{
background: #0000ff;
}
/*按钮显示结束*/
/*图片显示开始*/
/*再单选按钮input被checked时触发div*/
.btn1:checked~.box1{
background: #0000ff;
}
.btn2:checked~.box2{
background: #0000ff;
}
.btn3:checked~.box3{
background: #0000ff;
}
/*图片显示结束*/
效果图如下：（蓝色为显示，其他都为隐藏，- -！做的有点难看。通过点击不同按钮实现图片的切换。上面的CSS代码中，可以把background改为display，实现隐藏跟显示）
btn1-1 btn2-1 btn3-1
btn1-2 btn2-2 btn3-2
此为不懂js，用css做出来的图片切换，有点蛋疼。
重点在单选按钮input被checked时，利用关系选择符中的兄弟选择符触发其他兄弟元素的属性变化，还有就是html的标签位置，css不能回溯算法什么的（我也不懂），简单说就是不能通过后面控制前面的元素，不能通过子元素控制父元素什么的。所以这里要input标签放在最前面，这样才能通过兄弟选择符控制其他兄弟元素。
就到这了...
时间： 2024-11-07 13:15:11