Also made based on the tabs mootools

Two tabs on a first screenshot:

code show as below:

class:

/*
* CnYuTabber v0.3 01.25,09
*/
var CnYuTabber = new Class({
    Implements: Options,
    options: {
        mousetype: 'click',
        headContainer: '.TabTitle',
        tabhead: 'li',
        bodyContainer: '.TabContent',
        tabbody: 'div'
    },
    initialize: function(id, options) {
        this.setOptions(options);
        var mousetype = this.options.mousetype;
        var headContainer = this.options.headContainer;
        var bodyContainer = this.options.bodyContainer;
        var tabhead = this.options.tabhead;
        var tabbody = this.options.tabbody;
        var titles = $$('#' + id + ' ' + headContainer + ' ' + tabhead);
        var contents = $$('#' + id + ' ' + bodyContainer + ' ' + tabbody);
        this.titles = titles;
        this.contents = contents;
        this.index = 0;

        titles.each(function(title) {
            title.addEvent(mousetype, function(event) {
                this.index = titles.indexOf(title);
                titles.each(function(content, index) {
                    if (content == title) {
                        content.className = 'active';
                        contents[index].setStyle('display', 'block');
                        this.index = index;
                    }
                    else {
                        content.className = 'normal';
                        contents[index].setStyle('display', 'none');
                    }
                });
            });
        });
    },
    select: function(index) {
        this.index = index;
        return this.titles[index].fireEvent(this.options.mousetype);
    }
});

==================== Here is the test code ========================== ====

css

.none{display:none;}
#demo active{color:#f90;}

html

<div id="demo">
 <div class="TabTitle">
  <ul>
   <li class="active">title1</li>
   <li class="normal">title2</li>
  </ul>
 </div>
 <div class="TabContent">
  <div>
   content1
  </div>
  <div class="none">
   content2
  </div>
 </div>
</div>

Call:

 var tab=new CnYuTabber('demo');

Source file download :

http://files.cnblogs.com/cisky/demo.rar

 

Reproduced in: https: //www.cnblogs.com/cisky/archive/2010/09/21/1832517.html