zoukankan      html  css  js  c++  java
  • 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>                     

    一看就懂。走起!

  • 相关阅读:
    poj 3744 题解
    hdu 1850 题解
    New World
    CSP2019游记
    LOJ6052 DIV
    CF809E Surprise me!
    Luogu4548 歌唱王国
    Luogu4581 想法
    Note 5.26-5.28
    LOJ6519 魔力环
  • 原文地址:https://www.cnblogs.com/zhengjialux/p/5953290.html
Copyright © 2011-2022 走看看