选项卡 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 ...
随机推荐
- Python实现Hadoop MapReduce程序
1.概述 Hadoop Streaming提供了一个便于进行MapReduce编程的工具包,使用它可以基于一些可执行命令.脚本语言或其他编程语言来实现Mapper和 Reducer,从而充分利用Had ...
- DEV控件之ChartControl用法
一.总体概述 这个控件包含3层,最外面的chartControl层.中间的XYDiagram层.最里面的Series层.功能非常强大,但同时使用起来也相对复杂,需要各个层之间相互协调设置才能达到自己想 ...
- 网站图片列表动态显示、根据屏幕宽度动态设置DIV的CSS样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- L6 Shell
写出以下shell脚本1 判定一个用参数指定的文件是否为可执行,如果不是,则改为可执行#!/bin/bash if [ -x $1 ]then echo "OK"else echo ...
- HTTP头信息(转)--2
HTTP 头部解释 ========================================================================================== ...
- JVM结构、GC工作机制详解（转）
原文地址:http://blog.csdn.NET/tonytfjing/article/details/44278233 JVM结构.内存分配.垃圾回收算法.垃圾收集器.下面我们一一来看. 一.JV ...
- juce 中的ReferenceCountedObjectPtr
提供了对引用计数对象的管理,其实也就是操作引用计数对象,当引用计数为零的时候将对象销毁,值得学习的是juce是如果将引用计数对象和它的智能指针结合在一起的,这个后面再加分析 //=========== ...
- php simple_html_dom 一个iconv错误引起解析中断的问题，貌似内存溢出
环境: $pageNum = 8; for ($i = 1; $i < $pageNum; $i++) { $html = new simple_html_dom(); $host = 'htt ...
- Fragment和activity之间的通信
1>fragment可以调用getactivity()方法获取它所在的activity. 2>activity可以调用FragmentManager的findFragmentById()或 ...
- linux 程序运行监控
一 . 使用supervise 是daemon-tools 的一个功能,系统的守护进程.在进程挂掉的时候可以自动重启. 二 安装 wget http://cr.yp.to/daemontools/ ...