755彩票

js实现简单的选项卡功能

浏览:200 发布日期: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"
        }
    }
    }
评论( 相关
后面还有条评论,点击查看>>
合乐彩票 瑞祥彩票 卓易彩票 欢乐赛车 猎豹彩票 网易彩票 80彩票 澳门最有名彩票网站 美狮彩票 全球彩票开户