<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0}
div{width:300px;height:300px;border:1px solid red;background:tomato;font-size:50px;font-weight:bold;
line-height:300px;text-align:center;display:none;}
input{width:66px;height:30px;background:#ccc;font-weight:bold;}
.show{display:block;}
.active{width:80px;background:#f90;}
</style>
<script>
window.onload = function ()
{
//先获取按钮
var aBtn = document.getElementsByTagName('input');
//在过去div
var aDiv = document.getElementsByTagName('div');
for (var i=0;i<aBtn.length;i++) {
//为了给div创建关联条件自己定义了一行间的属性
aBtn[i].index = i;
aBtn[i].onclick = function ()
{
//先清空按钮的class名字
for (var i=0;i<aBtn.length;i++) {
aBtn[i].className = '';
aDiv[i].className = '';
}
//给当前你点击的那个按钮加上class
this.className = 'active';
var index = this.index;
aDiv[index].className = 'show';
}
}
}
</script>
</head>
<body>
<input type="button" value="中国" class="active" />
<input type="button" value="美国" />
<input type="button" value="韩国" />
<input type="button" value="日本" />
<div class="show">北京</div>
<div>华盛顿</div>
<div>首尔</div>
<div>东京</div>
</body>
</html>
js中选项卡的简单实现1
最新推荐文章于 2024-01-24 12:19:34 发布