选项卡 js操作
2024-04-23 18:47:05
html代码展示（这里展示的是关于日程的标签页）css样式这里省略了》》》》自己写的可能更好看
<div class="row"><ul class="second huan" id="huan"><li class="on" id="one" value="1"><div class="day">第一天</div><div class="date">2016年8月25日</div></li><li id="two" value="2"><div class="day">第二天</div><div class="date">2016年8月26日</div></li><li value="3"><div class="day">第三天</div><div class="date">2016年8月27日</div></li><li value="4"><div class="day">第四天</div><div class="date">2016年8月28日</div></li><li value="5"><div class="day">第五天</div><div class="date">2016年8月29日</div></li><li value="6"><div class="day">第六天</div><div class="date">2016年8月30日</div></li><div class="bc"></div></ul></div>
上面是标签页的标签，下面是对应的标签页的具体内容
<div class="row sch-detail"><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>10:30-11:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li></ul></li></ul></div><div class="right"><ul><li class="title">欢迎和介绍</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>11:30-12:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li><li class="first">李安娜</li><li class="first">张向阳</li><li class="first">王朔</li><li class="first">张扬眉</li></ul></li></ul></div><div class="right"><ul><li class="title">《产业金融》白皮书发布：跨界重构生态</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><span style="font-size: 0;">aaa</span></div><div class="right"><ul class="rest"><li class="date"><i class="icon icon-time"></i>12:00-13:00</li><li class="content">嘉宾间歇和午休时间</li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>13:30-15:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li><li class="first">李安娜</li><li class="first">张向阳</li><li class="first">王朔</li><li class="first">张扬眉</li></ul></li></ul></div><div class="right"><ul><li class="title">建立你的商业计划书</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div></div><div class="row sch-detail"><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>10:30-11:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li></ul></li></ul></div><div class="right"><ul><li class="title">欢迎嘉宾到来</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>11:30-12:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li><li class="first">李安娜</li><li class="first">张向阳</li><li class="first">王朔</li><li class="first">张扬眉</li></ul></li></ul></div><div class="right"><ul><li class="title">《产业金融》白皮书发布：跨界重构生态</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><span style="font-size: 0;">aaa</span></div><div class="right"><ul class="rest"><li class="date"><i class="icon icon-time"></i>12:00-13:00</li><li class="content">嘉宾间歇和午休时间</li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>13:30-15:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li><li class="first">李安娜</li><li class="first">张向阳</li><li class="first">王朔</li><li class="first">张扬眉</li></ul></li></ul></div><div class="right"><ul><li class="title">建立你的商业计划书</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div></div><div class="row sch-detail"><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>10:30-11:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li></ul></li></ul></div><div class="right"><ul><li class="title">欢迎嘉宾到来</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>11:30-12:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li><li class="first">李安娜</li><li class="first">张向阳</li><li class="first">王朔</li><li class="first">张扬眉</li></ul></li></ul></div><div class="right"><ul><li class="title">《产业金融》白皮书发布：跨界重构生态</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><span style="font-size: 0;">aaa</span></div><div class="right"><ul class="rest"><li class="date"><i class="icon icon-time"></i>12:00-13:00</li><li class="content">嘉宾间歇和午休时间</li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>13:30-15:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li><li class="first">李安娜</li><li class="first">张向阳</li><li class="first">王朔</li><li class="first">张扬眉</li></ul></li></ul></div><div class="right"><ul><li class="title">建立你的商业计划书</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div></div><div class="row sch-detail"><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>10:30-11:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li></ul></li></ul></div><div class="right"><ul><li class="title">欢迎嘉宾到来</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>11:30-12:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li><li class="first">李安娜</li><li class="first">张向阳</li><li class="first">王朔</li><li class="first">张扬眉</li></ul></li></ul></div><div class="right"><ul><li class="title">《产业金融》白皮书发布：跨界重构生态</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><span style="font-size: 0;">aaa</span></div><div class="right"><ul class="rest"><li class="date"><i class="icon icon-time"></i>12:00-13:00</li><li class="content">嘉宾间歇和午休时间</li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>13:30-15:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li><li class="first">李安娜</li><li class="first">张向阳</li><li class="first">王朔</li><li class="first">张扬眉</li></ul></li></ul></div><div class="right"><ul><li class="title">建立你的商业计划书</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div></div><div class="row sch-detail"><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>10:30-11:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li></ul></li></ul></div><div class="right"><ul><li class="title">欢迎嘉宾到来</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>11:30-12:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li><li class="first">李安娜</li><li class="first">张向阳</li><li class="first">王朔</li><li class="first">张扬眉</li></ul></li></ul></div><div class="right"><ul><li class="title">《产业金融》白皮书发布：跨界重构生态</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><span style="font-size: 0;">aaa</span></div><div class="right"><ul class="rest"><li class="date"><i class="icon icon-time"></i>12:00-13:00</li><li class="content">嘉宾间歇和午休时间</li></ul></div><div class="bc"></div></div><div class="detail"><div class="left"><ul class="le-ul"><li><i class="icon icon-time"></i>13:30-15:00</li><li><i class="icon icon-building"></i>主会场</li><li class="peo"><i class="icon icon-user"></i><ul><li class="first">徐斌</li><li class="first">李安娜</li><li class="first">张向阳</li><li class="first">王朔</li><li class="first">张扬眉</li></ul></li></ul></div><div class="right"><ul><li class="title">建立你的商业计划书</li><li class="content">产业金融白皮书发布：跨界重构生态，有的时候这个标题真的会很长的。</li><li class="img"><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/><img src="http://placehold.it/45x45"/></li></ul></div><div class="bc"></div></div></div>
可能复制的不全，自己用的时候找到class为
sch-detail的复制6段。
js部分（页面加载时运行onload）
<script type="text/javascript">window.onload=function(){var huan = document.getElementById("huan");var day = huan.getElementsByTagName("li");var dayDetail = document.getElementsByClassName("sch-detail");for (var i=0;i<day.length;i++) {day[i].index = i;day[i].onclick=function(){for (var i=0;i<day.length;i++) {day[i].className='';dayDetail[i].style.display="none";};this.className='on';dayDetail[this.index].style.display="block";};};};</script>方法可以自己换着用。。
转载于:https://www.cnblogs.com/shangguancn/p/5832845.html
选项卡 js操作相关推荐
- JS操作JSON总结
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...
- “是男人就下一百层”h5游戏全网最详细教学、全代码，js操作
"是男人就下一百层"h5游戏全网最详细教学.全代码,js操作 博主的话 游戏展示 编程工具介绍 游戏代码 代码讲解 js 第一步 切换div的显示与隐藏 js 第二步 在菜单页面用 ...
- html自定义datajs,科技常识：HTML5的自定义属性data-*详细介绍和JS操作实例
今天小编跟大家讲解下有关HTML5的自定义属性data-*详细介绍和JS操作实例 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5的自定义属性data-*详细介绍和JS操作实例 的 ...
- eclipsevue代码怎么运行_[Java教程]使用eclipse初步学习vue.js操作
[Java教程]使用eclipse初步学习vue.js操作 0 2017-11-26 19:00:06 一.vue.js的初步认识 https://unpkg.com/vue ">vu ...
- JS操作Excel读取和写入（模板操作）
前一段时间一直在做报表,所以肯定会用到Excel的操作,但是在网上查阅资料有关JS操作excel较少,有的话,也都是老生常谈或很零碎的一些东西.本人是在实际项目中摸索出,JS读写Excel(模板)数据 ...
- js操作frame详细解说,window.opener和window.parent的区别
js操作frame详细解说,window.opener和window.parent的区别 frame框架里的页面要改其他同框架下的页面或父框架的页面就用parent window.opener引用的是 ...
- js操作元素节点对象value
js操作元素节点对象value
- js操作元素节点对象innerHTML
js操作元素节点对象innerHTML
- js操作节点对象-getElementById
js操作节点对象
最新文章
- 【渝粤教育】广东开放大学 计算机思维 形成性考核 (29)
- AI写程序，这事可没那么简单！
- uTorrent for mac(BT下载客户端)v1.8.7中文版
- 安装python时需要勾选_工业洗衣机安装时需要注意什么？
- js打印线程id_Node.js多线程完全指南[每日前端夜话0x43]
- 中兴通讯和江苏电信携手推进SDN IPRAN创新进程
- QQ截图取色器：没有吸管工具的情况下，跨软件随时随地快捷取色
- uniapp canvas 合成头像
- 2020-Point attention network for semantic segmentation of 3D point clouds
- gdal+python计算NDVI
- 安徽师大附中%你赛day3T1 怜香惜玉 解题报告
- 于树莓派安装Ubuntu系统
- facebuilder免费版_FaceBuilder 2.1.1 For Blender 2.8x-2.9x脸头部照片建模纹理插件
- error LNK2038: 检测到“RuntimeLibrary”的不匹配项的解决办法
- 通达信指标公式绘图函数简介——自定义指标颜色、线型等
- 基于51单片机驱动HC-SR04超声波模块（LCD1602显示）
- The Road to multipath QUIC: 阿里自研多路径传输技术XLINK
- 【Sublime text 3】卸载重装Sublime text 3英文版
- chrome视频独立播放扩展Chrome China
- 中国国内航线信息的可视化