js实现点击不同按钮切换内容
2024-09-05 07:18:06
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.btn{
margin: 20px 120px;
width: 80px;
}
.content{
margin: 10px auto;
display: none;
}
.btn.active{
background-color: pink;
}
.content.show{
display:block; }
</style>
</head>
<body>
<p class="btn1">
<button class="btn active">页面一</button> <button class="btn">页面二</button> <button class="btn">页面三</button>
</p> <div class="content show">
<p>页面一要显示的内容</p>
<input type="text" placeholder="页面一内容"/>
</div>
<div class="content">
<p>页面二要显示的内容</p>
<input type="text" placeholder="页面二内容" />
</div> <div class="content" >
<p>页面三要显示的内容</p>
<input type="text" placeholder="页面三内容"/>
</div> <script>
//获取页面的每个按钮
var btns = document.getElementsByClassName("btn")
//获取内容盒子
var contents = document.getElementsByClassName("content") //遍历每个按钮为其添加点击事件
for(var i=0;i<btns.length;i++){
btns[i].index = i;
btns[i].onclick = function(){
//对当前点击的按钮赋予active类名及显示当前按钮对应的内容
for(var j=0;j<btns.length;j++){
btns[j].className = btns[j].className.replace(' active', '').trim();
contents[j].className = contents[j].className.replace(' show', '').trim();
}
this.className = this.className + ' active';
contents[this.index].className = contents[this.index].className + ' show';
}; } </script>
</body>
</html>
最新文章
- apache和tomcat有什么不同,为什么要整合apache 和tomcat
- js通过location.search来获取页面传来的参数
- Html简单介绍
- php以post方式向接口发送数据
- ASP.NET 大文件上传
- Android自定义进度条颜色
- 每天一个linux命令(15):whereis 命令
- git命令常见问题总结
- MySQL字符串类型转换时间类型
- Android假退出不是流氓行为
- 应用ubuntu(安装)
- 下拉刷新,上拉装载许多其他ListView
- word、pdf、ppt 转为图片
- CentOS6.5下安装oracle11gR2
- Ubuntu 下 libgps 库的使用
- 网络I/O 工作机制
- Ehcache 3.7文档—基础篇—Tiering Options
- MapReduce ----倒排索引
- angular 常用插件集合
- OSRM笔记
热门文章
- 用 python 解决线性代数中的矩阵运算
- go 集合
- [noi38]游戏
- 通过get方法的方式获取配置项信息
- js防止重复提交代码
- ☕【Java深层系列】「技术盲区」让我们一起完全吃透针对于时间和日期相关的API指南
- Python序列化,json&;pickle&;shelve模块
- 7. Minimum Depth of Binary Tree-LeetCode
- JAVA中null,";";,equals,==相互之间使用详解
- 11.13python第一周周末练习