首页 > 代码库 > 选项卡 js操作
选项卡 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操作
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。