选项卡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body,div,ul,li {
            margin: 0;
            padding:0;
            font-size: 12px;
            font-family: "微软雅黑";
        }
        ul,li {
            list-style: none;
        }
        html,body {
            -webkit-user-select:none;
        }
        #tab {
            margin:10px auto;
            width: 800px;
        }
        #tab ul {
            position: relative;
            top:1px;
            z-index: 2;
        }
        #tab li {
            float:left;
            margin-left: 10px;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            cursor: pointer;
            background-color: #996;
            border:1px solid red;
            border-bottom: none;
        }
        #tab li.lixz {
            background-color: #f9f;
        }
        #tab div{
            width: 800px;
            height: 300px;
            line-height: 300px;
            font-size: 36px;
            text-align: center;
            clear: both;
            border:1px solid red;
            display: none;
            background-color: #996;
        }
        #tab div.divxz {
            display: block;
            background-color: #f9f;
        }
    </style>
</head>
<body>
    <div id="tab">
        <ul>
            <li class="lixz">选项卡1</li>
            <li>选项卡2</li>
            <li>选项卡3</li>
            <li>选项卡4</li>
            <li>选项卡5</li>
        </ul>
        <div class="divxz">选项卡1对应的div</div>
        <div>选项卡2对应的div</div>
        <div>选项卡3对应的div</div>
        <div>选项卡4对应的div</div>
        <div>选项卡5对应的div</div>
    </div>
    <script type="text/javascript">
    //当点击某一个选项卡的时候,我们要做这样一件事情:、
    //首先让所有的li和对应的div都没有选中的样式
    //在让当前的那个选中样式
    //第一步要操作谁就先获取谁
        var oTab=document.getElementById('tab');
        var oLis=oTab.getElementsByTagName('li');
        var oDivs = oTab.getElementsByTagName('div');
    //第二步
        function tabChange(nIndex){
            //nIndex:你告诉我当前被选中的那个li的索引
            for(var i = 0;i<oLis.length;i++){
                oLis[i].className=null;
                oDivs[i].className=null;
                alert(oDivs[i].className)
            }
            oLis[nIndex].className="lixz";
            oDivs[nIndex].className="divxz";
        }
    //第三步:计划做好后就该执行了
    //错误写法
        // for(var i = 0 ; i<oLis.length;i++){
        //     oLis.item(i).onclick=function(){
        //         tabChange(i)
        //     }
        // }
        /*函数只执行的时候才有意义,没有执行前没有任何意义的作用
        oLis.item[0].onclick=function(){
            tabChange(i)
        }
        oLis.item[1].onclick=function(){
            tabChange(i)
        }
        ……
        只有当页面上的js代码都执行完了我们才能点击li触发,而此时循环中的i已经变成最后的那个5了、
        所以我们触发方法后面的那个匿名函数的时候,里面的i永远是5,导致了我们原本的需求没有实现
        */
    // 正确解答方法
    // 1)自定义属性方式
        // 我们知道执行的时候那个i已经变了,但是我们还需要把索引传过去,那么我们就干一件事,给5个li设置自定义属性,把对应的索引保存上,这样点击执行的时候我们只需要得到当前属性值就可以了
            // for(var i=0;i<oLis.length;i++){
            //     //设置自定义属性
            //     oLis[i].zxtIndex=i;
            //     oLis[i].onclick=function(){
            //         tabChange(this.zxtIndex)
            //     }
            // }
    //2)闭包方式写法
        for(var i=0;i<oLis.length;i++){
            ;(function(n){
                oLis[n].onclick=function(){
                    tabChange(n)
                }
            })(i)


        }
    </script>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值