选项卡 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 ...
随机推荐
- istream类的公有成员函数
1 eatwhite 2 get 3 getline 4 gcount 5 ignore 6 operator>> 7 peek 8 read 9 seekg 10 tellg 1 eat ...
- deal with 'non-admin area' warn
We usually use the follow code to delete product in Magento $product = Mage::getSingleton('catalog/p ...
- Web API核查表：设计、测试、发布API时需思考的43件事[转]
Web API核查表:设计.测试.发布API时需思考的43件事 当设计.测试或发布一个新的Web API时,你是在一个原有的复杂系统上构建新的系统.那么至少,你也要建立在HTTP上,而HTTP则是 ...
- protobuf使用错误总结
1>HelloWorldScene.obj : error LNK2019: 无法解析的外部符号 "public: virtual __thiscall LoginReqMessage ...
- 后台找到repeater里面的div并添加客户端点击事件
public partial class Inv_SelectWorkservice : System.Web.UI.Page,IPostBackEventHandler{ } 通过OnItemCre ...
- bootstrap注意事项（八）一些辅助信息
1.三角符号 通过使用三角符号可以指示某个元素具有下拉菜单的功能.注意,向上弹出式菜单中的三角符号是反方向的. <!DOCTYPE HTML><html><head> ...
- 关于vs启动调试报错：CS0016: 未能写入输出文件“xxxxxxxx”--“目录名称无效。”解决方法
很多人都会遇到这个错误,网友说一般这错误都是由于权限引起,我尝试按照博客写的方法,解决失败!http://www.cnblogs.com/finesite/archive/2011/01/28/194 ...
- iOS开发笔记：编译时出现的错误和解决办法
1."std::ios_base::Init::~Init()", referenced from 出现这样的编译问题,是需要再加进libstdc++.dylib和libstdc+ ...
- 好博客分享 go需要运行容器？ 不需要
http://blog.csdn.net/wsl211511/article/details/51645324 粗浅看 Tomcat中设计模式分析 http://www.infoq.com/cn/ar ...
- leetcode Swap Nodes in Pairs python
# Definition for singly-linked list. # class ListNode(object): # def __init__(self, x): # self.val = ...