选项卡 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 ...
随机推荐
- oracle实例名,数据库名,服务名等概念差别与联系
数据库名.实例名.数据库域名.全局数据库名.服务名 这是几个令非常多刚開始学习的人easy混淆的概念.相信非常多刚開始学习的人都与我一样被标题上这些个概念搞得一头雾水.我们如今就来把它们弄个明确. 一 ...
- Mina入门：Java NIO基础概念
JDK1.4引入了Java NIO API(Java New IO),Java NIO得到了广泛应用.NIO允许程序进行非阻塞IO操作.java.nio.* 包括以下NIO基本结构: Buffer - ...
- C#小性能知识
字符串比较 string s = ""; 1) if(s == ""){} 2) if(s == string.Empty){} 3) if (string.I ...
- clinit和init（转载）
clinit和init(转载) 今天在看深入Java虚拟机的class文件结构时,看到了这么一句话, 可能出现在class文件中的两种编译器产生的方法是:实例初始化方法(名为<init> ...
- ASP.NET MVC 与Form表单交互
一,Form包含文件类(单选文件) <form id="ImgForm" method="POST" enctype="multipart/fo ...
- Python核心编程读笔 7： 条件和循环
第八章 条件和循环 一.if python中的条件表达式:很奇葩!!! smaller = (x < y and [x] or [y])[0] 或者: smaller = x if x < ...
- IOS优秀博客
链接地址:http://www.cnblogs.com/keithmoring/p/4155264.html 剑心的博客信息量很大,适合查阅和入门,学习完,你差不多就可以出山了,还有作为复习IOS的一 ...
- 并发编程: c++11 thread(Func, Args...)利用类成员函数创建线程
c++11是VS2012后支持的新标准,为并发编程提供了方便的std::thread. 使用示例: #include <thread> void thread_func(int arg1, ...
- RandomAccessFile浅析
RandomAccessFile类中的write方法有以下的注意事项: 首先write方法每次都写入一个字节 api中write方法如下 public void write(int b) throws ...
- 几种改变Activity回退栈默认行为的Intent Flag
FLAG_与LaunchMode相比最大的不同是临时性 1.FLAG_ACTIVITY_NEW_TASK: Developer.android.com的说法: (1)在新的task中启动这个Activ ...