选项卡的另外几种实现思路-优快云博客

本文介绍了一种使用HTML和JavaScript实现元素动态显示的方法，通过三种不同的方式为标题列表的每个元素绑定点击事件，展示了如何利用闭包、Node对象自定义属性及ES5的forEach方法来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    #wrapper .item{
        display: none;
    }
    </style>
</head>
<body>
<ul id="title">
    <li>第1行</li>
    <li>第2行</li>
    <li>第3行</li>
</ul>   
<div id="wrapper">
    <div class="item">第1个内容</div>
    <div class="item">第2个内容</div>
    <div class="item">第3个内容</div>
</div>
<script>
window.onload = function(){
    var oTitleList = document.querySelectorAll("#title li");
    var oContentList = document.querySelectorAll("#wrapper .item");
    
    //方法一：利用闭包
    for(var i=0;i<oTitleList.length;i++){
        oTitleList[i].onclick = (function(i){return function(){
            alert(i);
        }}(i));
    }

    //方法二：利用Node的对象特性可以存自定义的属性
    for(var i=0;i<oTitleList.length;i++){
        oTitleList[i].index = i;
        oTitleList[i].onclick = function(){
            alert(this['index']);
        }
    }

    //方法三：利用ES5的forEach
    Array.prototype.forEach.call(oTitleList,function(ele,i){
        ele.onclick = function(){
            alert(i);
        }
    })


}   
</script>
</body>
</html>

转载于:https://my.oschina.net/u/1792175/blog/598111