选项卡 js操作

时间：2016-09-02 13:20:15 阅读：183 评论：0 收藏：0 [点我收藏+]

标签：

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操作

标签：

原文地址：http://www.cnblogs.com/shangguancn/p/5832845.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行