简单的选项卡制作(原生JS)
2024-10-08 00:26:48
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div{
width: 100px;
height: 100px;
background-color: aqua;
color: white;
display: none;
}
</style>
</head> <body>
<a href="javascript:btn(1)">视频</a>
<a href="javascript:btn(2)">音乐</a>
<a href="javascript:btn(3)">图片</a>
<div>视频</div>
<div>音乐</div>
<div>图片</div>
</body>
</html>
<script>
var odiv = document.getElementsByTagName("div");
function btn(index){
for(var i = 0 ;i<odiv.length;i++){
odiv[i].style.display = "none";
}
odiv[index-1].style.display = "block";
} </script>
最新文章
- [ASP.NET] 如果将缓存&ldquo;滑动过期时间&rdquo;设置为1秒会怎样?
- 20145320 《Java程序设计》第1周学习总结
- wap网站safari浏览器和微信cooke不能登录问题
- Ganglia监控MySQL
- JAVA赋值运算符
- 为PHP开发者准备的12个调试工具
- 《HelloGitHub月刊》第10期
- Android网络编程要学的东西与Http协议学习
- java数组2
- 【java】-- java并发包总结
- 20165306 Exp4 恶意代码分析
- for循环中按条件删除数据元素
- Java并发编程:volatile关键字解析zz
- VUEX新笔记
- UNIGUI与UNIURLFRAME的互动
- 20165316 2017-2018-2《Java程序设计》课程总结
- C#复数类的总结
- Android JNI学习(二)——实战JNI之“hello world”
- 第六章 函数、谓词、CASE表达式 6-2 谓词
- 苏宁OLAP架构设计
热门文章
- 用原生js封装轮播图
- POJ-2255-Tree Recovery-求后序
- PAT甲级——A1132 Cut Integer
- python 中的 用chr()数值转化为字符串,字符转化为数值ord(s)函数
- vue+element的el-menu组件实现路由跳转及当前项的设置
- 10_springmvc JSON数据交互
- 开发环境、测试环境、生产环境、UAT环境、仿真环境详解
- 串口通信中,QString 、QByteArray 转化需要注意的问题
- JavaScript设置body高度为浏览器高度的方法
- 新一代云WAF:防御能力智能化,用户享有规则“自主权”