选项卡 js操作

Posted 上官靖宇

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了选项卡 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操作的主要内容，如果未能解决你的问题，请参考以下文章

Android - 一个选项卡中的多个片段

ActionBar Sherlock ，操作栏选项卡和片段

片段处理屏幕方向与操作栏中的选项卡

删除选项卡时在 ActionBar 选项卡片段中运行代码

如何在每个操作栏选项卡中维护多个Fragment堆栈或多个子片段

操作栏选项卡：使用多次实例化的单个片段时如何传递参数