一个菜鸟的互联网技术分享博客
您的位置: 主页 > 原生javascript效果:选项卡切换
advertisement

原生javascript效果:选项卡切换

<html>
<head>
<meta charset="utf-8">
<title>选项卡</title>
<style type="text/css">
.main {width:400px; margin:0 auto;}
#title {height:30px; line-height:30px;}
#title span {float:left; width:120px; height:30px; margin-right:5px; color:#333; background:#eee; text-align:center; cursor:pointer; font-weight:bold;}
#title span.active {background:#333; color:#fff;}
#con {background:#fafafa; height:200px; border-top:2px solid #333;}
#con ul {display:none; padding:10px;}
#con ul.active {display:block;}
#con ul li {height:24px; line-height:24px; border-bottom:1px dotted #ccc; text-indent:10px;}
</style>
 
</head>
<body>
<div class="wrapper">
<h1>原生javascript效果:选项卡切换</h1>
<div class="main">
<h4 id="title">
<span class="active">跑得快第一帅</span>
<span>跑得快第一帅_张</span>
<span>跑得快第一帅_仁</span>
</h4>
<div id="con">
<ul class="active">
<li><a href="#">第一个tab测试一</a></li>
<li><a href="#">第一个tab测试二</a></li>
<li><a href="#">第一个tab测试三</a></li>
<li><a href="#">第一个tab测试四</a></li>
</ul>
<ul>
<li><a href="#">第二个tab测试一</a></li>
<li><a href="#">第二个tab测试二</a></li>
<li><a href="#">第二个tab测试三</a></li>
</ul>
<ul>
<li><a href="#">第三个tab测试一</a></li>
<li><a href="#">第三个tab测试二</a></li>
<li><a href="#">第三个tab测试三</a></li>
<li><a href="#">第三个tab测试四</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var oTitle = document.getElementById('title');
var aSpan = oTitle.getElementsByTagName('span');
var oCon = document.getElementById('con');
var aUl = oCon.getElementsByTagName('ul');
var i = 0;
for(i=0; i<aSpan.length; i++) {
aSpan[i].index = aUl[i].index = i;
aSpan[i].onclick = function () {
for(i=0; i<aSpan.length; i++) {
aSpan[i].className = '';
aUl[i].className = '';
}
this.className = 'active';
aUl[this.index].className = 'active';
}
}
</script>
</body>
</html>
zhangren.online
上一篇:没有了
下一篇:原生JS实现鼠标悬停tab切换

您可能喜欢

​jQuery数字字母组合验证码

​jQuery数字字母组合验证码

​鼠标点击时出现小心心

​鼠标点击时出现小心心

​获取当前页面的链接里的某个值

​获取当前页面的链接里的某个值

​解决ajax跨域问题

​解决ajax跨域问题

回到顶部