设计Tab面板

HTML

<h1>XMLHttpRequest对象成员参考</h1>
<div class="tab_wrap">
    <ul class="tab" id="tab">
        <li id="tab_1" onMouseOver="check(1)" class="hover">属性</li>
        <li id="tab_2" onMouseOver="check(2)" class="normal">方法</li>
    </ul>
    <div class="content" id="content">
        <div id="content_1" class="show">暂无属性</div>
        <div id="content_2" class="none">暂无方法</div>
    </div>
</div>
					    

CSS

table {
    margin: 1em;
    border-collapse: collapse;
    border: solid 1px #FF33FF;
}
td, th {
    border: solid 1px #FF33FF;
    padding: 4px 8px;
}
					    

JS

// 封装创建XMLHttpRequest对象
function createXMLHTTPObject()
{
    var XMLHttpFactories = [
		function () {return new XMLHttpRequest()},
		function () {return new ActiveXObject("Msxml2.XMLHTTP")},
		function () {return new ActiveXObject("Msxml3.XMLHTTP")},
		function () {return new ActiveXObject("Microsoft.XMLHTTP")}
        ];
    var xmlhttp = false;
    for (var i = 0; i < XMLHttpFactories.length; i ++ )
    {
        try
        {
            xmlhttp = XMLHttpFactories[i]();
        }
        catch (e)
        {
            continue;
        }
        break;
    }
    return xmlhttp;
}
var request = createXMLHTTPObject();

function check(n){
    request.open( "GET", "test.asp?coun=" + n, true );
    request.onreadystatechange = function(){
		updatePage(n);
	};
    request.send( null );
}

function updatePage(n)
{
	if(n==1){
   		var info = document.getElementById( "content_1" );
	}else{
		var info = document.getElementById( "content_2" );
	}
    if( request.readyState == 1 )
    {
        info.innerHTML = "<img src='images/loading.gif' />，连接中......";
    }
    else if( request.readyState == 2 || request.readystate == 3 )
    {
        info.innerHTML = "<img src='images/loading.gif' />，读数据......";
    }
    else if( request.readyState == 4 )
    {
        if( request.status == 200 )
        {
            xml = request.responseXML;
            info.innerHTML = showXml( xml );
        }
        else
        alert( request.status );
    }

}

function showXml( xml )
{
    var count = "";
    var html = "";
    var items = xml.getElementsByTagName( "item" );
    html += "<table><tr><th>成员名</th><th>类型</th><th>说明</th></tr>"
    //for( var i  in  items ){
	for( var i=0 ; i< items.length; i++ ){
        html += "<tr>"
        var child = items[i].childNodes
        //for( var n in child ){
		for( var n=0 ; n< child.length; n++ ){
			if( child[n].nodeType == 1 ){
				html += "<td>"
				html += child[n].firstChild.data;
				html += "</td>"
			}
        }
        html += "</tr>";
    }
    html += "</table>"
    return html;
}