this指向

图片描述

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {margin:0;padding:0;}
        ul {list-style:none;}
        body {background:#eee; font-size:12px;}
        #tabs {width:300px; margin:100px auto; background:#fff;}
        #options {height:30px; line-height:30px;}
        #options span {display:inline-block; width:60px; text-align:center;}
        #options span.on {border-bottom:2px solid orange; font-weight:bold;}
        #contents {padding:10px 0;}
        #contents li {line-height:23px; padding-left:15px; }
        #contents ul {display:none;}
    </style>
</head>
<body>
    
    <div id="tabs">
        <div id="options">
            <span class="on">公告</span><span>规则</span><span>论坛</span><span>安全</span><span>公益</span>
        </div>
        <div id="contents">
            <ul style="display:block;">
                <li><a href="">阿里苏宁发布"新三体"战略 打造未来十年格局</a></li>
                <li><a href="">高诚信会员无条件信任 200余万广告商品被处罚</a></li>
            </ul>
            <ul>
                <li><a href="">出售假冒商品规则变更 商品发布数量限制变更</a></li>
                <li><a href="">中国质造市场管理规范变更 淘宝网营销规则变更</a></li>
            </ul>
            <ul>
                <li><a href="">淘宝招募卖家志愿者 阿里推出兼职神器</a></li>
                <li><a href="">700家热风淘宝路 是赚钱还是骗子</a></li>
            </ul>
            <ul>
                <li><a href="">淘宝用户必备神器 卖家账户安全9守则</a></li>
                <li><a href="">支付宝实名认证信息 账户没钱也被骗？</a></li>
            </ul>
            <ul>
                <li><a href="">阿里联合公益计划启动 一图看懂联合公益计划</a></li>
                <li><a href="">公益宝贝卖家发票索取 公益机构淘宝开店攻略</a></li>
            </ul>
        </div>
    </div>
    
    <script type="text/javascript">
        
        //获取所有的span
        var spans = document.getElementById('options').getElementsByTagName('span');
        //获取所有的ul
        var uls = document.getElementById('contents').getElementsByTagName('ul');

        //需要循环绑定mouseover事件
        for (var i = 0,len = spans.length; i < len; i++) {
            //将i的值作为span元素对象的属性保存到每一个span当中，
            spans[i]['index'] = i;

            spans[i].onmouseover = function(){
                //处理的标题部分
                //一刀切，把所有的span的class设置为空,再次循环
                for (var j = 0; j < len; j++) {
                    spans[j].className = "";
                }
                /*
                    spans[0].className = "";
                    spans[1].className = "";
                    spans[2].className = "";
                    spans[3].className = "";
                    spans[4].className = "";
                */                
                //将当前的span的class设置为on
                this.className = "on";
                this.style.cursor = "pointer";
                //处理内容部分
                //一刀切，所有的ul都隐藏
                for (var k = 0; k < len; k++) {
                    uls[k].style.display = "none";
                }
                //和当前的span对应的那个ul显示
                console.log( i );
                //console.log( this.index );
                //uls[i].style.display = "block"; 不能直接使用i
                uls[this.index].style.display = "block";
                
            }
        }

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

阅读 3.3k

this指向

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

css布局怎么保证右边一直在可视范围内？