选项卡，又称“标签页”，英文中有统一名称，谓之 Tab。Tab 是一种常见的控件，能够有效地利用空间而广泛使用。

在线预览：http://naturaljs.googlecode.com/svn/trunk/demo/widgets/tab.html

开发过程中遇到的问题。

• IE 事件对象没有 e.target，而是 srcELmenent 取而代之，故：

  var el  = e.target || e.srcElement;

• IE 事件对象没有 e.currentTarget 登记事件的那个元素，也没有相应的属性值，故在登记事件处理器的时候 委托 元素 在第二个参数中：

  el.onClk(onTabChooserPressHandler.delegate(null, el));
  ……    
  function onTabChooserPressHandler(e, _container){
          // 搜索 el 下的 li 元素，到容器为止
          var el             = e.target || e.srcElement, 
              container    = e.currentTarget || _container； 
  

• IE8 元素虽有子元素集合 children，但有 bug， 把注释元素都算进去了，故修正如下。

  var el  = e.target || e.srcElement;

• IE 中，事件对象可以用不同的方式进行访问。当一个事件 Handler 通过 DOM 0 级的方式被授权，则这个事件对象将作为 window 对象的属性而存在，看下面的例子，

  　　var btn ＝ document.getElementById('mybtn');
  
  　　btn.onclick = function(){
  
  　　　　var event = window.event;
  
  　　　　alert(event.type);//"click"
  
  　　} 

  　　此时，event 对象来源于 window.event 对象，并且之后又用于确定事件类型。然而，当 eventHandler 通过 attachEvent()这种方式来授权的话，event 对象将作为 function 的唯一参数，请看如下代码　　

  var btn = document.getElementById(“myBtn”);
  btn.attachEvent(“onclick”, function(event){
     alert(event.type); //”click”
  });

  　　当使用attachEvent() 方法时，事件对象同时也可以在window对象上进行访问，和dom 0级的实现方式一样，并且事件对象同样被传进来作为一个参数。　　如果event Handler 是通过HTML属性被授权的，event是作为一个一个变量被访问的，叫做event。例如

  <input type=”button” value=”Click Me” onclick=”alert(event.type)”>

  参考：http://www.cnblogs.com/MrBackKom/archive/2012/06/24/2559681.html

如果候选栏出现下面的错位，那么请在 Tab 容器前面加入一个换行符 <br />。

		<br />
		<div class="tabContainer tab2">
			<ul>
				<li class="selected">车主简介</li>
				<li>车辆图片</li>
				<li>资质证照</li>
			</ul>
                ....

因为 tabs 是一个 DOM 队列，所以必须保证队列间不能插入非 tab 标签，即使 <script><style> 也不行，否则会渲染出错。

DHTML回头看：一步一步之浏览器的 scroller 滚动

首先说说怎么让浏览器出现滚动条？最普遍的一种的描述是，内容足够长的话，浏览器便会自动出现滚动条，也就是说，内容长度与容器长度是有密切关系的，一旦容器高度小于实际内容长度（高度）的时候，浏览器应该出现滚动条，以便让用户翻滚内容，——无论是 X 方向抑或 Y 的方向。控制容器高度，可以是通过拖放容器控件来决定，也就是 resize  事件；另外一种便是写死容器的高度，譬如某个 DIV，我定义其 height : 200px 高度，而实际内容超出 200px， 很自然要出现滚动条。滚动条是一旦内容超长的话便会出现的——如果要控制滚动条不出现这样需求的需求怎么办？很简单，就是让 overflow 样式属性为 hidden ，表示绝对禁止滚动条出现。如果 overflow 为 auto，表示内容不长的话便不出现滚动条，长了就出现。 

用户自己控制滚动条是最普遍的情形，那么，我说，我们程序员写代码来控制滚动条移动是否可以？答案当然是可以。接下来介绍的这个 scrollTop/scrollLeft 属性便是办这件事情的。它们一个是向下方滚动，另外一个是向右滚动，可以说当搞清楚了 Top 方向自然晓得 Left 方向。为方便咱叙述，咱挑一个 scrollTop 说就行。scrollTop 是关于可见内容与其容器最顶端之间的距离，它是可读可写的属性，接受类型为Number，怎么理解这个“可读可写”？当读取 scroll 的时候，就是获取当前距离是多少；对 scrollTop 写入的时候，就是设置内容进行“滚动”，滚动多少便是数值的大小。scrollTop 初识值是 0，极值是所处容器的高度，步进值就是咱赋予 scrollTop 的值，一次移动多少，那么这时候就是写入 scrollTop 的时候。如果 el.scrollTop = 10 就是“滚动”到刻度为10的那个位置上，测试一下这个例子 1.1：

http://naturaljs.googlecode.com/svn/static/dhtml/scroller/1.htm

看到滚动条有变化了吧？第一个例子通常比较简单的，以便顺利入门：我们只是在 onClick 事件中写了一句：

document.getElementById('Test_1').scrollTop = 10;

意思是滚动的幅度为10像素。因为 scrollTop 初始值是 0，所以可以直接使用 += 运算符，这样的话，多次按下按钮的作用就是进行连续滚动，请见例子 1.2：

http://naturaljs.googlecode.com/svn/static/dhtml/scroller/1.htm

如当前我们制定步幅为20那样，第一次滚动20个像素，再按一次，40，第三次就是60……到了极值之后再按都不会滚动了。

作为笔者的我也不得不表示，毫无难度。

/**
 * 固定位置元素（简单版）。
 */
function simpleCouplet(el) {
	var el = document.getElementById(el);	// 	获取元素
   
	setInterval(function() {
		el.style.top = (document.body.scrollTop + 50) + 'px';
	}, 2);
}

/**
 * Couplet that moves with the screen scroll.
 * @argument {String} el The id of element
 */
couplet = function(_el){
    var moveFn = function(){
        //'arguments.callee.count' remembers how many times this ay-Fn has been called. 
        if (!arguments.callee.count) {
            arguments.callee.count = 0;
        }
        var _percent = 0.1 * (document.documentElement.scrollTop - arguments.callee.count);
        var percent = _percent > 0 ? Math.ceil(_percent) : Math.floor(_percent);
        this.setTop(this.getTop() + percent);
        arguments.callee.count += percent;
    };
    //todo try to use "window.onscroll"
    setInterval(moveFn.createDelegate(Ext.get(_el).setStyle('position', 'absolute')), 2);
};