体彩20选5中奖条件

js實現簡單的選項卡功能

瀏覽:203 發布日期:2019/11/25 分類:功能實現 關鍵字: -
-
js實現簡單的選項卡功能


style部分↓ #box button.ac{
            background: blue
        }
        #box div{
            width: 300px;
            height: 300px;
            border: 1px solid red;
            display: none; //將其他div隱藏
        }
body部分↓<div id="box">
        <button class="ac">選項卡1</button>
        <button>選項卡2</button>
        <button>選項卡3</button>
        <div style="display: block">111</div>
        <div>222</div>
        <div>3333</div>
    </div>
js部分↓//第一步:window.onload
window.onload=function(){
//第二步:獲取dom節點
        var $=item=>document.querySelectorAll(item)
        var But=$("#box button")
        var Div=$("#box div")
        //操作dom節點
    for(var i=0;i<But.length;i++){
        But[i].index=i;//循環里面加事件,事件里面i值不能用,解決方法:在每一個元素身上添加一個i值
        But[i].onclick=function(){
            for(var i=0;i<But.length;i++){
                But[i].className=''
                Div[i].style.display="none"
            }
            this.className="ac"
            Div[this.index].style.display="block"
        }
    }
    }
評論( 相關
后面還有條評論,點擊查看>>
体彩20选5中奖条件 陕西11选5 陕西11选5 启牛配资 陕西快乐10分 中国股票配资网 北单比分直播最快最准 湖北11选5 双色球 贵丰配资 快来金融 美国zozo人与马 重庆快乐十分 p3试机号 股票配资排名丿选 财人汇配资 看足球指数的软件