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

最新推荐文章于 2024-02-26 22:14:06 发布

KOTP17

最新推荐文章于 2024-02-26 22:14:06 发布

阅读量234

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_58517459/article/details/123442242

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<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";
    }