原生js写一个选项卡
来源:互联网 发布:特化师网络更新时间 编辑:程序博客网 时间:2024/06/05 00:34
html代码: <h2 class="active">选项卡1</h2> <h2>选项卡2</h2> <h2>选项卡3</h2> <div style="display:block;background-color:hotpink;">内容1</div> <div style="background-color:darkkhaki;">内容2</div> <div style="background-color:gray;">内容3</div>css代码: h2{ // 首先设置h2的宽高 ,将h2初始 化。 width:90px; height:30px; border:1px solid firebrick; float:left; text-align: center; border-bottom: 0; cursor: pointer; }div{ width:275px; height:300px; border:1px solid gray; display: none; position:absolute; left:7px; top:59px; } .active{ background:#B22222; color:white; }
js代码:
var oH2 = document.getElementsByTagName('h2'); var oDiv = document.getElementsByTagName('div'); // console.log(oDiv) for(var i = 0; i < oH2.length; i++){ oH2[i].index = i; oH2[i].onclick = function(){ for(var i = 0; i < oH2.length; i++){ oH2[i].className = 'null'; oDiv[i].style.display = 'none'; } this.className = 'active'; oDiv[this.index].style.display = 'block'; } }
阅读全文
0 0
- 原生js写一个选项卡
- 原生JS写选项卡
- 用JS写原生的选项卡
- 原生js写tab选项卡
- 原生js选项卡
- 分别用原生JS与jQuery 写简单选项卡
- 如何用原生 javascript 写一个选项卡?
- 用js写一个选项卡
- 用原生js写一个手风琴
- 用原生js写一个弹框
- 如何用js写一个简易选项卡
- 原生JS实现选项卡效果实例
- 原生js写tab
- 原生js写ajax
- 原生js写手风琴
- 原生js写的一个下拉框功能插件
- 使用原生js写一个日期的倒计时
- 用jQuery跟原生js实现选项卡效果
- Android的异步方法总结
- Selenium自动化测试框架和个人见解
- 获取泛型的类
- Idea中如何使用Git的基本操作
- 浅拷贝和深拷贝
- 原生js写一个选项卡
- QT编程-day1
- matplotlib.pyplot.figure
- ASP.NET 多环境下配置文件web.config的灵活配置
- 用实际程序来测试udp sendto函数的最大发包大小------为什么是65507?
- vs的LNK1146错误(任何工程编译都报错)
- opencv读取海康威视摄像头
- ACM 程序设计竞赛 数学题目
- 使用ZooKeeper实现配置同步(转)