前段時間做了一個用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標簽放在最前面，這樣才能通過兄弟選擇符控制其他兄弟元素。
就到這了...