前段时间做了一个用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，实现隐藏跟显示）
此为不懂js，用css做出来的图片切换，有点蛋疼。
重点在单选按钮input被checked时，利用关系选择符中的兄弟选择符触发其他兄弟元素的属性变化，还有就是html的标签位置，css不能回溯算法什么的（我也不懂），简单说就是不能通过后面控制前面的元素，不能通过子元素控制父元素什么的。所以这里要input标签放在最前面，这样才能通过兄弟选择符控制其他兄弟元素。
就到这了...