选项卡，又称“标签页”，英文中有统一名称，谓之 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);
};
