CSS實現Tab面板
不能自行切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.wrap{
margin: 20px auto;
width: 800px;
height: 500px;
border: 1px solid crimson;
position: relative;
}
label{
width: 150px;
height: 33px;
float: left;
text-align: center;
line-height: 33px;
border: 1px solid darkcyan;
}
label:nth-of-type(4){
border-right: none;
}
label span{
cursor: pointer;
}
label input{
width: 0;
}
label div{
position: absolute;
display: none;
}
input:checked+div{
display: block;
}
</style>
</head>
<body>
<div class="wrap">
<label for="">
<span>玫瑰</span>
<input type="radio" name="tab" checked>
<div>玫瑰花🌹</div>
</label>
<label for="">
<span>雛菊花</span>
<input type="radio" name="tab">
<div>雛菊</div>
</label>
<label for="">
<span>向日葵</span>
<input type="radio" name="tab">
<div>向日葵</div>
</label>
<label for="">
<span>滿天星</span>
<input type="radio" name="tab">
<div>滿天星</div>
</label>
</div>
<script>
</script>
</body>
</html>
JavaScript實現Tab面板
思路:
1.實現標題小模塊的Tab切換
-
首先給所有的標題小模塊清除樣式
-
給鼠標移入的標題小模塊添加樣式
2.實現主體模塊和標題小模塊之間的綁定
-
給標題小模塊添加一個屬性index,用以記錄標題小模塊的索引
-
通過getAttribute()方法得到索引,從而對應主體模塊的內容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#box{
width: 700px;
height: 300px;
border: 1px solid darkgreen;
margin: 30px;
}
#list li{
float: left;
width: 150px;
height: 50px;
border: 1px solid sienna;
list-style: none;
text-align: center;
line-height: 50px;
}
#deli{
height: 50px;
}
#list,#deli div{
height: 100%;
display: none;
}
#list,#deli .current{
display: block;
background-color: tan;
}
</style>
</head>
<body>
<div id="box">
<ul id="list">
<li class="current">english</li>
<li>chinese</li>
<li>math</li>
<li>P.E.</li>
</ul>
<div id="deli">
<div class="current">english</div>
<div>chinese</div>
<div>math</div>
<div>p.e</div>
</div>
</div>
<script>
var list=document.getElementById('list');
//獲取所有li
var lis=list.getElementsByTagName('li');
var deli=document.getElementById('deli');
//獲取所有主體的div
var divs=deli.getElementsByTagName('div');
for(var i=0;i<lis.length;i++){//給所有li註冊事件
var li=lis[i];
li.setAttribute('index',i);
//當鼠標移入li的時候，清除所有小模塊的樣式，只給當前小模塊添加樣式
li.onmouseover=function(){
for(var i=0;i<lis.length;i++){
lis[i].className="";
this.className="current";//清除所有模塊樣式
divs[i].className='';
divs[i].style.display='none';
//對當前模塊進行操作
var index=parseInt(this.getAttribute('index'));
divs[index].className='current';
divs[index].style.display='block';
}
}
}
</script>
</body>
</html>
jQuery實現Tab面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../js/jquery-1.8.3.min.js"></script>
<style type="text/css">
*{margin: 0px;padding: 0px;}
.box{
width: 670px;
height: 300px;
margin: 30px;
border: 1px solid black;
}
.wrap li{
float: left;
width: 160px;
height: 50px;
border: 1px solid sienna;
list-style: none;
text-align: center;
line-height: 50px;
}
.deli{
height: 100%;
}
.deli div{
height: 100%;
display: none;
}
.wrap .current{
font-size: 25px;
}
.wrap .current,.deli div.product{
height: 100%;
display: block;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="box">
<ul class="wrap">
<li class="current">english</li>
<li>chinese</li>
<li>math</li>
<li>pe</li>
</ul>
<div class="deli">
<div class="product">english</div>
<div>chinese</div>
<div>math</div>
<div>pe</div>
</div>
</div>
<script>
$(function () {
$(".wrap>li").mouseover(function () {
//刪除樣式
$(this).siblings("li").removeClass("current");
//增加樣式
$(this).addClass("current");
//顯示對應當前div
var index=$(this).index();
$(".deli>div").removeClass("product");
$(".deli>div:eq("+index+")").addClass("product");
});
});
</script>
</body>
</html>
jQuery和Bootstrap實現Tab面板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tab面板的實現</title>
<link rel="stylesheet" href="../css/bootstrap-theme.css">
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/jquery-1.8.3.min.js"></script>
<script src="../js/tab.js"></script>
<script>
$(function(){
$('.tabs a:last').tab('show');
})
</script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">玫瑰花🌹</a></li>
<li><a href="#tab2" data-toggle="tab">雛菊</a></li>
<li><a href="#tab3" data-toggle="tab">向日葵</a></li>
<li><a href="#tab4" data-toggle="tab">滿天星</a></li>
<li><a href="#tab5" data-toggle="tab">雛菊1</a></li>
<li><a href="#tab6" data-toggle="tab">向日葵1</a></li>
<li><a href="#tab7" data-toggle="tab">滿天星1</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">玫瑰花🌹</div>
<div class="tab-pane" id="tab2">雛菊</div>
<div class="tab-pane" id="tab3">向日葵</div>
<div class="tab-pane" id="tab4">滿天星</div>
<div class="tab-pane" id="tab5">雛菊1</div>
<div class="tab-pane" id="tab6">向日葵1</div>
<div class="tab-pane" id="tab7">滿天星1</div>
</div>
</div>
</body>
</html>