选项卡的另外几种实现思路

<!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

来源：https://blog.csdn.net/chuomu8273/article/details/100682053

标签

选项卡

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!