选项卡普通写法

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>５０４３</div>
		<div>５３４７４</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;
        cursor:pointer;
	}
	#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

/**
初始化(即默认选中哪个)放在了 JS 中处理，可以降低 HTML 和 JS 的耦合性，如果需求变动，只需要改动 curIndex 即可。
**/

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;    // 当前选中标签页的下标
    
    // 初始化
    common.addClass(titles[curIndex], titleActive);
    common.addClass(contents[curIndex], contentActive);
    
    // 添加事件
    for (var i=0;i<titles.length ;i++) {
        
        (function(index){
            
            titles[index].onclick = function(){
                
                // 移除之前的样式
                for (var i=0;i<titles.length ;i++ ) {
                    common.removeClass(titles[i], titleActive);
                    common.removeClass(contents[i], contentActive);
                }
                
                // 添加当前样式
                common.addClass(this, titleActive);
                common.addClass(contents[index], contentActive);
            };
        })(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, ''));
            };
        }
       ...