【jQuery】Tab选项卡（li之间的切换）
演示地址：暂未开放，请前往在线代码测试网
测试代码如下：固定格式在这里就省略了，如果有问题大家可以自行调整。
No.1 jQuery版
<html>
<head>
<style>
/*网点、取件、咨询信息*/
.titTabs {
width: auto;
margin: 0 auto;
margin-top: 5px
}
.titTabs .titTab {
height: 37px;
font-size: 14px;
border-bottom: 1px #e1e1e1 solid
}
.titTabs .titTab li {
float: left;
height: 36px;
line-height: 36px;
padding: 0 25px;
margin-right: 5px;
background: #f0f0f0;
border-top: 1px #e1e1e1 solid;
border-left: 1px #e1e1e1 solid;
border-right: 1px #e1e1e1 solid;
}
.titTabs .titTab li:hover {
height: 37px;
background: #f0f0f0;
color: #fff;
cursor: pointer
}
.titTabs .active {
height: 37px !important;
background: #f18200 !important;
color: #fff
}
.titTabs .titInfo {
background: #fff;
border-bottom: 1px #e1e1e1 solid;
border-left: 1px #e1e1e1 solid;
border-right: 1px #e1e1e1 solid;
}
.titTabs .titInfo div {
display: none
}
.titTabs .titInfo th,.titTabs .titInfo td {
border-bottom: 1px solid #ddd;
padding-left: 20px
}
.titTabs .titInfo .on {
display: block
}
.tit01,.tit02,.tit03 {
font-size: 12px;
color: #000;
}
.tit01 li,.tit02 li,.tit03 li {
line-height: 36px;
}
style>
head>
<body>
<div class="titTabs">
<ul class="titTab">
<li class="active"> <i>i> <span>网点span> li>
<li> <i class="take">i> <span>取件span> li>
<li> <i class="ask">i> <span>咨询信息span> li>
ul>
<div class="titInfo">
<div class="on">
<ul class="tit01">
<li>
<table>
<thead>
<tr>
<th style="width: 480px">网点名称th>
<th style="width: 250px">营业时间th>
tr>
thead>
<tbody>
<tr>
<td style="text-align: left">深圳市1604td>
<td style="text-align: left">2017-1-12 09:00td>
tr>
<tr>
<td style="text-align: left">深圳市1604td>
<td style="text-align: left">2017-1-12 09:00td>
tr>
tbody>
table>
li>
ul>
div>
<div>
<ul class="tit02">
<li>
<table>
<thead>
<tr>
<th style="width: 480px">取件要求th>
<th style="width: 250px">取件时间th>
tr>
thead>
<tbody>
<tr>
<td style="text-align: left">本人必须亲自到场，不接受代领！td>
<td style="text-align: left">2017-1-12 09:25td>
tr>
<tr>
<td style="text-align: left">本人必须亲自到场，不接受代领！td>
<td style="text-align: left">2017-1-12 09:25td>
tr>
tbody>
table>
li>
ul>
div>
<div>
<ul class="tit03">
<li>
<table>
<thead>
<tr>
<th style="width: 480px">公司名称th>
<th style="width: 250px">联系电话th>
tr>
thead>
<tbody>
<tr>
<td style="text-align: left">深圳市有限公司td>
<td style="text-align: left">0755-8888888td>
tr>
<tr>
<td style="text-align: left">深圳市有限公司td>
<td style="text-align: left">0755-8888888td>
tr>
tbody>
table>
li>
ul>
div>
div>
div>
<script type="text/javascript">
$(document).ready(function(e) {
$(".titTab li").click(function(){
$(".titTab li").eq($(this).index()).addClass("active").siblings().removeClass("active");
$(".titInfo div").hide().eq($(this).index()).show();
});
});
script>
body>
html>No.2 原生js版：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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;ifunction(){
for(var j=0;j'';
divs[j].className = '';
}
this.className = 'on';
divs[this.qiancheng].className = 'on';
}
}
script>
body>
html> No.3 纯CSS3版：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<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>