前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >面向对象编程的思想

面向对象编程的思想

作者头像
天天_哥
发布2018-09-29 13:56:48
4010
发布2018-09-29 13:56:48
举报
文章被收录于专栏:天天
1.布局
代码语言:javascript
复制
<div class="box" id="box">
    <p id="title"><span class="clicked">游戏</span><span>旅行</span><span>音乐</span></p>
    <ul class="info" id="info">
        <li class="select">GTA5、孤岛惊魂</li>
        <li>澳大利亚、西藏</li>
        <li>暗里着迷、一生有你</li>
    </ul>
</div>
2.js

a.函数封装

代码语言:javascript
复制
function P(a){
        var spans = document.getElementById(a).getElementsByTagName('span');
        var lis = document.getElementById(a).getElementsByTagName('li');
        for(var i=0;i<spans.length;i++){
            spans[i].index = i;
            spans[i].onclick = function (){
                for(var j=0;j<spans.length;j++){
                    spans[j].className='';
                    lis[j].className = "";
                }
                this.className='clicked';
                lis[this.index].className = "select"
            };
        }
    }

    P("box");

b.面向对象

代码语言:javascript
复制
function Tab(a){
    this.spans = document.getElementById(a).getElementsByTagName('span');
    this.lis = document.getElementById(a).getElementsByTagName('li');

    for(var i=0;i<this.spans.length;i++){
        this.spans[i].index = i;
        var _this = this;
        this.spans[i].onclick = function(){
            _this.clicked(this)
        }
    }
}

Tab.prototype.clicked = function(a){
    for(var j=0;j<this.spans.length;j++){
        this.spans[j].className = "";
        this.lis[j].className = "";
    }
    a.className ="clicked";
    this.lis[a.index].className = "select";

}
var p = new Tab("box");
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017.11.08 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.布局
  • 2.js
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档