【jQuery】Tab選項卡（li之間的切換）
阿新 • • 發佈：2019-02-20
演示地址：暫未開放，請前往線上程式碼測試網
測試程式碼如下：固定格式在這裡就省略了，如果有問題大家可以自行調整。
No.1 jQuery版
<html>
<head>
<style>
/*網點、取件、諮詢資訊*/
.titTabs {
width: auto;
margin: 0 auto;
margin-top: 5px
}
.titTabs .titTab {
height: 37px;
font-size: 14 No.2 原生js版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width:312px;
border:2px red solid;
margin: 0 auto;
}
ul{
overflow: hidden;
}
li{
list-style: none;
background:red;
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border: 2px solid orange;
}
li.on{
background: green;
border-bottom: none;/*讓該卡頭的下邊框為“none”*/
height: 32px;/*卡頭的內容高度設定為：原內容的高度+卡頭下邊框的寬度。*/
}
.box div{
background:green;
display: none;
width: 312px;
height: 200px;
font-size: 30px;
border-top: none;/*在開始寫樣式時，就把展示區上邊框設定成“none”*/
}
.box div.on{
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<ul>
<li class="">中國</li>
<li>日本</li>
<li>韓國</li>
</ul>
<div class="on">中國是老大</div>
<div>日本是老二</div>
<div>韓國是老三</div>
</div>
<script>
var box = document.getElementById('box');
var lis = box.getElementsByTagName('li');
var divs = box.getElementsByTagName('div');
for(var i=0;i<lis.length;i++){
lis[i].qiancheng = i;
lis[i].onclick = function(){
for(var j=0;j<lis.length;j++){
lis[j].className = '';
divs[j].className = '';
}
this.className = 'on';
divs[this.qiancheng].className = 'on';
}
}
</script>
</body>
</html>No.3 純CSS3版：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none
}
body {
background: #ccc
}
.main {
position: relative;
margin: 50px auto;
width: 300px;
height: 150px;
color: #fff
}
.main input {
display: none
}
.main label {
display: block;
height: 24px;
cursor: pointer;
text-align: center;
}
.main li {
float: left;
margin-right: 3px;
width: 50px;
height: 24px;
background: #eee;
line-height: 24px
}
.main div {
position: absolute;
top: 24px;
left: 0;
display: none;
width: 300px;
height: 126px;
padding: 10px;
}
.main div,.main input:checked~label {
background: #999
}
.main input:checked~div {
display: block
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>
<input type="radio" name="tabs" id="tab1" checked>
<label for="tab1">語文</label>
<div>床前明月光</div>
</li>
<li>
<input type="radio" name="tabs" id="tab2">
<label for="tab2">數學</label>
<div>疑是地上霜</div>
</li>
<li>
<input type="radio" name="tabs" id="tab3">
<label for="tab3">英語</label>
<div>舉頭望明月</div>
</li>
<li>
<input type="radio" name="tabs" id="tab4">
<label for="tab4">政治</label>
<div>低頭思故鄉</div>
</li>
</ul>
</div>
</body>
</html>