编程，实现tab标签的切换。（事件委托）-CFANZ编程社区

编程，实现tab标签的切换。（事件委托）

<body>
    <div id="wrapper">
        <ul id="ul">
            <li>娱乐新闻页面</li>
            <li>军事新闻页面</li>
            <li>体育新闻页面</li>
        </ul>
        <ol>
            <li>娱乐新闻页面</li>
            <li>军事新闻页面</li>
            <li>体育新闻页面</li>
        </ol>
    </div>
</body>
var ul = document.getElementById("ul");
    var ulis = document.querySelectorAll("ul li");
    var olis = document.querySelectorAll("ol li");
    // console.log(ulis);
    // console.log(olis);
    //给每一个ul下的li添加一个属性
    for (var i = 0; i < ulis.length; i++) {
        ulis[i].index = i;
    }
    ul.onclick = function(event) {
        var event = event || window.event;
        var index = event.target.index;
        console.log(index);
        for (var j = 0; j < olis.length; j++) {
            olis[j].style.display = 'none';
        }
        olis[index].style.display = "block";
        for (var i = 0; i < ulis.length; i++) {
            ulis[i].style.backgroundColor = "gray";
        }
        ulis[index].style.backgroundColor = "pink";
    }

0 条评论