一个简单的tab选项卡实例

时间：2011-03-07 来源：chemdemo

结构：

View Code

 1 <div class="demo">
 2         <ul id="tab_t1" class="hd">
 3             <li>新闻</li>
 4             <li>视频</li>
 5             <li>图片</li>
 6         </ul>
 7         <ul id="tab_c1" class="bd">
 8             <li class="news">
 9                 我正要推开车门，他从身后挽住了我的腰，我不由自主回头，触到他如星子一般的眼眸："康楠......如果觉得辛苦，一定要告诉我，让我替你分担。从现在开始，你不再是一个人了，明白了吗？"
10             </li>
11             <li class="videos">
12                 我站在转弯的街角，清风吹拂，将我的裙角微微掀起，我只得捏着裙摆，浏览着街边小店的橱窗打发时间。时间一分一秒地过去，林默风迟迟没有出现。终于听到小车的轰鸣声，奥迪停在了路口，玻璃摇下来，戴着墨镜的林默风面无表情地注视着我，看着我向他走过来。他今天也穿得十分休闲随意，一件蓝色格子的鳄鱼T恤和白色休闲裤，一只手放松地搭在车窗玻璃上，墨镜里，那双瞳仁目光灼灼地盯着我，仿佛想看穿我的心事。我不禁纳闷地问："你怎么了？"
13             </li>
14             <li class="photos">
15                 爱情是场机遇，转瞬即逝，可惜在它闪现时许多人都往往没有来得及做好拥抱的准备。所以人世间才有那么多伤心的人儿，流泪的情歌，伤感的情怀……休完年假，我回到公司，却敏感地察觉到了一丝异样。办公室里气氛有些诡异，大家瞄着我的眼神也带着莫名其妙的同情。我的心里浮现一丝不祥的预感，他们怎么了？我只离开了4天，是不是工作上出什么事了？
16             </li>
17         </ul>
18     </div>

实现过程：

var $ = function(id) {
        return document.getElementById(id);
};

function getChildNode(superNode, index) {
/*
 * 功能说明：
 * 传入父元素节点，按照index顺序查找子节点，从1开始（注意：只针对元素节点）
 * 如果不传入index或index是0，则返回所有子节点
 */
        if(!superNode.childNodes) return;
        //if (typeof index !== 'number') { alert('请输入数字索引'); return; }
        index = Number(index) || 0;
        var subNodes = [];
        var result = null;
        
        for(var i=0, len=superNode.childNodes.length; i<len; i++) {//得到所有子元素节点
                var node = superNode.childNodes[i];
                if(node.nodeType == 1) {
                        subNodes.push(node);
                } else {
                        continue;
                }
        }
        
        if(index === 0) {
                result = subNodes;
        } else {
                for(var i= 0; i<subNodes.length; i++) {
                        subNodes[i].flag = i + 1;
                        if(subNodes[i].flag == index) {
                                result = subNodes[i];
                                break;
                        };
                }
        }
        
        return result? result : alert('你输入的索引值对应的子节点不存在！');
}

function TabObj(tabT, tabC, index, type) {
        this.index = Number(index) || 0;
        this.type = Number(type) || 0;

        this.btns = getChildNode(tabT, 0);
        this.boxs = getChildNode(tabC, 0);

        this.open(this.index);

        for(var i=0; i<this.btns.length; i++) {
                var _this = this;
                this.btns[i].flag = i;
                if(this.type == 0) {
                        this.btns[i].onmouseover = function() {
                                _this.open(this.flag);
                        };
                } else {
                        this.btns[i].onclick = function() {
                                _this.open(this.flag);
                        };
                }
        }
}

TabObj.prototype = {
        open: function(n) {
                this.close();
                this.btns[n].className = 'open';
                this.boxs[n].className = 'block';
        },
        close: function() {
                for(var i=0; i<this.btns.length; i++) {
                        this.btns[i].className = 'close';
                        this.boxs[i].className = 'hidden';
                }
        }
}

window.onload = function() {
        var tabObj1 = new TabObj($('tab_t1'), $('tab_c1'));
        var tabObj2 = new TabObj($('tab_t2'), $('tab_c2'), 1, 1);
}

说明：定义了两种类型的事件，即鼠标移上去切换或者鼠标点击切换；另外，还可以自行定义页面载入时选项卡停在那里，默认是第一个按钮上。