选项卡 js操作

时间：2021-02-16 17:10:15

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>

方法可以自己换着用。。

 

标签：

相关文章