使用css製作簡單的點擊切換效果，參考了以下教程：css實現的輪播和點擊切換(無js版)
首先先製作一個容器，用來容納所顯示的內容：
HTML代碼：
<html></html>
<head>
<meta charset="utf-8">
<link href="css/test.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div class="contain">
<ul>
<li></li>
<li></li>
<li>/li>
</ul>
</div>
</body>
</html>CSS代碼：
.contain{
position: relative;
margin:auto;
width: 600px;
height: 200px;
text-align: center;
font-family: Arial;
color: #FFF;
}HTML代碼：
<div class="contain">
<ul>
<li class="sildeInput-1">one-點擊切換</li>
<li class="sildeInput-2">two-點擊切換</li>
<li class="sildeInput-3">three-點擊切換</li>
</ul>
</div>
.contain ul{
margin:10px 0;
padding:0;
width: 1800px;
}
.contain li{
float: left;
width: 600px;
height: 200px;
list-style: none;
line-height: 200px;
font-size: 36px;
}
.sildeInput-1{
background: #9fa8ef;
}
.sildeInput-2{
background: #ef9fb1;
}
.sildeInput-3{
background: #9fefc3;
}
效果如下:
可以看到，多出來的部分也被顯示出來了，此時就要給顯示窗口設置overflow:hidden;屬性，將多出來的部分隱藏起來
CSS代碼：
.contain{overflow: hidden;}
可以看到，多出來的部分全部被隱藏起來了，這樣，我們就可以通過修改ul的margin-left屬性值實現簡單的切換效果。
接下來寫三個單選框用於切換，因爲需要實現點擊之後才進行切換的效果，此時將lable指向相應的input標籤的id並使用僞類:checked來實現選擇切換的效果。
HTML代碼：
<div class="contain">
<input type="radio" name="sildeInput" value="0" id="Input1" hidden>
<label class="label1" for="Input1">1</label>
<input type="radio" name="sildeInput" value="1" id="Input2" hidden>
<label class="label2" for="Input2">2</label>
<input type="radio" name="sildeInput" value="1" id="Input3" hidden>
<label class="label3" for="Input3">3</label>
<ul>
<li class="sildeInput-1">one-點擊切換</li>
<li class="sildeInput-2">two-點擊切換</li>
<li class="sildeInput-3">three-點擊切換</li>
</ul>
</div>
.label1{
position: absolute;
bottom: 10px;
left: 0px;
width: 20px;
height: 20px;
margin: 0 10px;
line-height: 20px;
color: #FFF;
background: #000;
cursor: pointer;
}/*用於調整單選框的屬性以及位置*/
.label2{
position: absolute;
bottom: 10px;
left: 30px;
width: 20px;
height: 20px;
margin: 0 10px;
line-height: 20px;
color: #FFF;
background: #000;
cursor: pointer;
}/*用於調整單選框的屬性以及位置*/
.label3{
position: absolute;
bottom: 10px;
left: 60px;
width: 20px;
height: 20px;
margin: 0 10px;
line-height: 20px;
color: #FFF;
background: #000;
cursor: pointer;
}/*用於調整單選框的屬性以及位置*/
#Input1:checked~ul{ margin-left: 0;}/*第一張點擊切換*/
#Input1:checked~.label1{ background: #535353;}/*點擊後改變單選框顏色*/
#Input2:checked~ul{ margin-left: -600px;}/*第二張點擊切換*/
#Input2:checked~.label2{ background: #535353;}/*點擊後改變單選框顏色*/
#Input3:checked~ul{ margin-left: -1200px;}/*第三張點擊切換*/
#Input3:checked~.label3{ background: #535353;}/*點擊後改變單選框顏色*/
最後，再給ul標籤添加transition:all 0.5s;屬性，設置0.5秒的平滑過渡
css代碼：
.contain ul{transition:all 0.5s;}