tab练习
2017-06-19 本文已影响0人
LorenaLu
$('#tab-title span').click(function(){ $(this).addClass("selected").siblings().removeClass(); $("#tab-content > ul").slideUp('1500').eq($('#tab-title span').index(this)).slideDown('1500')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM-TAB</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
width: 120px;
height: 30px;
text-align: center;
border: 1px solid;
display: inline-block;
}
.contents{
border: 1px solid gray;
width: 400px;
height: 200px;
}
.contents div{
font-size: 30px;
display: none;
}
.active{
background: red;
}
</style>
</head>
<body>
<ul>
<li class="active">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="contents">
<div class="">
这是标签一的内容
</div>
<div class="">
这是标签二 的内容
</div>
<div class="">
这是标签三的内容
</div>
</div>
</body>
<script>
var lis = document.querySelectorAll("ul li");
var divs = document.querySelectorAll(".contents>div");
var currentIndex = 0;
for(var i=0;i<lis.length;i++){
lis[i].index = i;
lis[i].onclick = function(){
lis[currentIndex].className="";
divs[currentIndex].style.display = "none";
this.className = "active";
currentIndex = this.index;
divs[currentIndex].style.display = "block";
}
}
</script>
</html>
for(var i = 0;i<spans.length;i++){
spans[i].onclick = function(){
// for (var j = spans.length - 1; j >= 0; j--) {
// spans[j].className="";
// };
var ss = document.querySelectorAll('span');
for (var j = 0; j<ss.length; j++) {
ss[j].className="";
};
this.className = 'active';
image.png
