选项卡 js操作
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>
方法可以自己换着用。。
选项卡 js操作的更多相关文章
- ionic js ion-tabs选项卡栏操作
ionic 选项卡栏操作 ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航 ...
- js操作DOM对象
js操作DOM对象 (Document Object Model)文档对象模型 nodeType返回值 1:元素节点 2:属性节点 3:文本节点 8:注释节点 9: 文档节点 nodeName 节点 ...
- js操作当前窗口
CreateTime--2017年7月21日09:58:34Author:Marydon js操作当前窗口 1.打开一个新的窗口(新的标签页) 实现方式:window.open(url) 实例一: ...
- JS操作未跨域iframe里的DOM
这里简单说明两个方法,都是未跨域情况下在index.html内操作b.html内的 DOM. 如:index.html内引入iframe,在index内如何用JS操作iframe内的DOM元素? 先贴 ...
- ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作
ThinkPHP 表单提交操作成功后执行JS操作如何刷新父页面或关闭当前页等操作 .操作成功后刷新父页面 $this->assign('jumpUrl', "javascript:wi ...
- jquery.cookie.js 操作cookie实现记住密码功能的实现代码
jquery.cookie.js操作cookie实现记住密码功能,很简单很强大,喜欢的朋友可以参考下. 复制代码代码如下: //初始化页面时验证是否记住了密码 $(document).ready( ...
- JS操作JSON总结
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式.同时,JSON是 JavaScript 原生格式,这意 ...
- [荐]使用Js操作注册表
使用Js操作注册表 要操作注册表需要通过ActiveX控件调用WScript.shell对象,通过该对象的一些方法来操作. WshShell对象:可以在本地运行程序.操纵注册表内容.创建快捷方式或访问 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
随机推荐
- network is unreachable 解决方案之一
请按http://blog.csdn.net/oxiaoxio/article/details/41775183 一文中的设置方法设置:
- 全国计算机等级考试二级教程-C语言程序设计_第11章_对函数的进一步讨论
无论传递什么参数,函数都有副本机制 改变一个变量,需要传入变量的地址 改变一个指针变量,需要传入指针变量的地址 //int add(int a, int b);挖取函数声明 //int ()(int ...
- instance variables may not be placed in categories
Avoid Properties in Categories Objective-C分类中是不允许增加成员变量的(Instance variables may not be placed in cat ...
- kobox: key_proc.c -v1 怎样使用proc文件系统调试驱动
使用proc文件系统能够非常方便调试驱动.查看驱动中的一些数据 平台:TQ2440 系统版本号: root@ubuntu:/mnt/shared/kobox# uname -a Linux ubunt ...
- startActivityForResult不返回结果
startActivityForResult不返回结果,请检查AndroidManifest中的描写叙述,是否对该Activity设置了:launchMode="singleTask&quo ...
- update慢怎样处理？
update慢: 1.表的pctfree參数设置? 2.运行计划用索引还是全表扫? 3.SQL语句写法问题? 4.update慢还是commit慢? 5.更新多少条数据? 6.表是否频繁update造 ...
- 使用SuperWebSocket 构建实时 Web 应用
Web 应用的信息交互过程通常是客户端通过浏览器发出一个请求,服务器端接收和审核完请求后进行处理并返回结果给客户端,然后客户端浏览器将信息呈现出来,这种机制对于信息变化不是特别频繁的应用尚能相安无事, ...
- 在 PL/SQL Developer 中执行SQL文件的方法
打开 command Window SQL> @'D:\My Documents\Downloads\bde_chk_cbo.sql'; 整个路径及文件两边要有单引号哦!
- php 接收curl json 数据
curl -H "Content-Type: application/json" http://127.0.0.1:8000 -X POST -d 'xxxx' php $strP ...
- 各种数据库的批量插入操作_Oracle
最近工作中需要优化以前各种的Excel批量导入功能,目前将能优化的方面做个记录. 选用技术: 目前.Net可以访问Oracle常用的Dll,有三种: 微软自带的 System.Data.OracleC ...