Javascript 简单切换效果

最新推荐文章于 2025-09-05 11:22:47 发布

weixin_30633507

最新推荐文章于 2025-09-05 11:22:47 发布

阅读量103

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fengzj/p/5476160.html

本文介绍了一种使用纯CSS和JavaScript实现的简单Tab切换效果。通过为按钮和内容块设置不同的类名来控制显示与隐藏状态，实现了交互式的Tab面板效果。此方案不依赖任何前端框架。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab</title>
<style type="text/css">
* {padding:0; margin:0;}
button {
background-color: #ccc;
width:80px;
height: 30px;
}
.btn-active {
background-color: yellow;
font-weight:bold;
font-size: 14px;
}
#dd div{
width:200px;
height: 200px;
font-size: 64px;
background-color: #0c0;
display: none;
color:#fff;
}
#dd .div-active {
display: block;
}

</style>
</head>
<body>
<button class="btn-active">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<div id="dd">
<div class="div-active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>

<script type="text/javascript">
//1.先获取元素
var buttonList = document.getElementsByTagName("button");
var divList = document.getElementById("dd").getElementsByTagName("div");
//2.添加事件
for(var i = 0; i < buttonList.length; i++) {
buttonList[i].index = i;
buttonList[i].onclick = function() {
for(var j = 0; j < buttonList.length;j++) {
buttonList[j].className = "";
// divList[j].className = "";
//或下面写法
divList[j].style.display = "none";
}
buttonList[this.index].className = "btn-active";
// divList[this.index].className = "div-active";
//或下面写法
divList[this.index].style.display = "block";
}
}