选项卡优化写法

by 孙 超

HTML

<div class="box">
    <ul id="ul_title">
		<li class="active">标题1</li>
		<li>标题2</li>
		<li>标题3</li>
		<li>标题4</li>
	</ul>

	<div id="ul_container">
		<div class="active">内容1</div>
		<div>内容2</div>
		<div>内容3</div>
		<div>内容4</div>
	</div>
</div>

CSS

*{
		margin:0;
		padding:0;
	}
	#ul_title{
		
	}
	#ul_title li{
		float:left;
		width:100px;
		height:50px;
		font-size:16px;
		line-height:50px;
		list-style:none;
		text-align:center;
		background-color:#eee;
	}
	#ul_title li.active{
		font-weight:bold;
		background-color:#ccc;
	}
	#ul_container{
		width:400px;
		height:300px;
	}
	#ul_container div{
		display:none;
		width:100%;
		height:100%;
        border:1px solid #ccc;
	}
	#ul_container div.show{
		display:block;
	}

JavaScript

window.onload = function(){

		var titleContainer = document.getElementById("ul_title"),
			container = document.getElementById("ul_container"),

		    titles = titleContainer.children,
			contents = container.children,
			titleActive = "active",
			contentActive = "show",
			curIndex = 0;    // 当前选中标签页的下标

	    var prevActive = 0;

        // 初始化
        common.addClass(titles[curIndex], titleActive);
        common.addClass(contents[curIndex], contentActive);
        
        // 添加事件
        for (var i=0;i<titles.length ;i++) {
    
            (function(index){
                titles[index].onclick = function(){
                    // 移除之前的样式
                    common.removeClass(titles[prevActive], titleActive);
                    common.removeClass(contents[prevActive], contentActive);
                    
                    // 添加当前样式
                    common.addClass(this, titleActive);
                    common.addClass(contents[index], contentActive);
    
                    prevActive = index;
                };
            })(i);
        }
	};

	// 公共方法
	var common = {
		
		// 添加class
		addClass: function(obj, className){

			if(obj.classList){
				
				this.addClass = function(obj, className){
					obj.classList.add(className);
				};
			} else {

				this.addClass = function(obj, className){

					var originalClass = obj.className;
					var re = new Regexp("\\b" + className + "\\b", "g");
					var result = className;

					if(re.test(originalClass)) {
						return;
					}
					if(originalClass != ""){
						result += " " + className;
					} 
					obj.className =  this.combAndTrim(result.replace(re, ''));
				};
			}
			this.addClass(obj, className);
		},
		
		removeClass : function(obj, className){
			
			if (obj.classList){
				this.removeClass = function(obj, className){
					obj.classList.remove(className);
				}
			} else {
				this.removeClass = function(obj, className){
					var re = new RegExp("\\b" + className + "\\b",...