首页 > web前端 > js教程 > 正文

js原声快速实现选项卡

高洛峰
发布: 2016-10-12 16:39:41
原创
1081 人浏览过

js原声快速实现选项卡

var Rea = document.getElementById("rep");
                    var ReaAll = Rea.querySelectorAll("li");
                    var Fall = document.getElementById("fall");
                    var FallAll = Fall.querySelectorAll("ul");
                    
                    for(var i=0;i<ReaAll.length;i++){ 
                       ReaAll[i].index=i;
                       ReaAll[i].onclick=function(){
                       for(var i=0;i<ReaAll.length;i++){
                           ReaAll[i].className=" ";
                           FallAll[i].style.display="none";
                       }
                       this.className="avtion";
                       FallAll[this.index].style.display="block";
                       }
                    }
登录后复制
<ul class="row rep_ad" id="rep">
                                        <li class="avtion">公告</li>
                                        <li>知识库</li>
                                    </ul>
                                    <div id="fall">
                                        <ul style="display:block;">
                                            <li>11111111111111111</li>
                                            <li>11111111111111111</li>
                                            <li>11111111111111111</li>
                                            <li>11111111111111111</li>
                                            <li>11111111111111111</li>
                                        </ul>
                                        <ul>
                                            <li>22222222222222222</li>
                                            <li>22222222222222222</li>
                                            <li>22222222222222222</li>
                                            <li>22222222222222222</li>
                                            <li>22222222222222222</li>
                                        </ul>
                                    </div>
                                </div>
登录后复制

1.png

1.png

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!