Ajax标签式网页导航效果（源码）

Ajax标签导航效果

注：本文来自：蓝色理想 ，文责版权均属于原作者。

本文代码最终效果演示（点击这里）

function.js

<!--
functiongetObject(objectId)...{
if(document.getElementById&&document.getElementById(objectId))...{
//W3CDOM
returndocument.getElementById(objectId);
}
elseif(document.all&&document.all(objectId))...{
//MSIE4DOM
returndocument.all(objectId);
}
elseif(document.layers&&document.layers[objectId])...{
//NN4DOM..note:thiswon'tfindnestedlayers
returndocument.layers[objectId];
}
else...{
returnfalse;
}
}

varresponsecont;
varxmlHttp;
varrequestType;
varnewsstring;

functionCreateXMLHttpRequest()...{
//InitializeMozillaXMLHttpRequestobject
if(window.XMLHttpRequest)...{
xmlHttp=newXMLHttpRequest();
}
//InitializeforIE/WindowsActiveXversion
elseif(window.ActiveXObject)...{
try...{
xmlHttp=newActiveXObject("Msxml2.XMLHTTP.3.0");
}
catch(e)...{
try...{
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
catch(e)...{newsstring="服务器繁忙,请稍后重新连接！";}
}
}
}

functiongetnews(tagid,x)...{
varurl=tagid+'_'+x+'.htm';
requestType=tagid;
CreateXMLHttpRequest();

xmlHttp.onreadystatechange=processRequestChange;
xmlHttp.open("GET",url,true);
xmlHttp.setRequestHeader("If-Modified-Since","0");
xmlHttp.send(null);
}

functionprocessRequestChange()...{
//onlyifxmlHttpshows"complete"
if(xmlHttp.readyState==4)...{
//onlyhttp200toprocess
if(window.location.href.indexOf("http")==-1||xmlHttp.status==200)...{
　　　newsstring=xmlHttp.responseText;
//injectcententtotab-pane
shownews(requestType,newsstring);
}
}
}

functionshownews(requestType,newsstring)...{
//<![CDATA[
responsecont=getObject(requestType+'_cnt');
responsecont.innerHTML=newsstring;
//]]>
}

functionTabNews(tagid,x)...{
for(vari=1;i<=7;i+=2)...{
if(i==x)...{
getObject(tagid+i).className="tabactive"+i;
if(i!=1)...{
getObject(tagid+(i-1)).style.display="none";
if(i!=7)...{
getObject(tagid+(i+1)).style.display="none";
}
}
if(i==1)...{
getObject(tagid+"2").style.display="none";
}
try...{
getnews(tagid,i);
}
catch(e)...{
alert(e);
}
}
else
...{
getObject(tagid+i).className="";
if(i!=7)...{
getObject(tagid+(i+1)).style.display="block";
}
}
}
}
//-->

style.css

body{...}{margin:0;padding:0;background:#FFF;color:#000;font:normal12px宋体,arial,sans-serif;text-align:left;}
div,form,ul,ol,li,span,p{...}{border:0;margin:0;padding:0;}

/**//*链接样式*/
a:link{...}{color:#000;text-decoration:none;}
a:visited{...}{color:#000;text-decoration:none;}
a:hover{...}{color:#16387C;text-decoration:underline;}

/**//*清除float*/
.clear{...}{clear:both;font-size:1px;visibility:hidden;}

/**//*空格*/
.blank2{...}{font-size:1px;height:2px;margin:0auto;width:962px;}
.blank5{...}{font-size:1px;height:5px;margin:0auto;width:950px;}
.sblank2{...}{font-size:1px;height:2px;margin:0auto;width:100px;}
.sblank3{...}{font-size:1px;height:3px;margin:0auto;width:100px;}
.sblank5{...}{font-size:1px;height:5px;margin:0auto;width:400px;}
.sblank7{...}{font-size:1px;height:7px;margin:0auto;width:400px;}

/**//*边距*/
.margin-right{...}{margin-right:6px;}
.margin-right-left{...}{margin-right:3px;margin-left:3px;}

/**//*字体颜色*/
.fcborange{...}{color:#F0741A;font:bold12pxarial,sans-serif;}
.fcred{...}{color:#FF0000;}
.fcwhite{...}{color:#FFF;font:normal13px宋体,arial,sans-serif;letter-spacing:1px;}

/**//*新闻标签导航*/
.news_tabsnav{...}{
background:url(../images/tab_bg.gif)#FFFlefttoprepeat-x;
border:solid#B0BEC7;
border-width:01px01px;
height:22px;
margin:0auto;
padding:0;
width:506px;
}

.news_tabsnav.tabsmenu{...}{
height:22px;
}

.news_tabsnav.tab_sline{...}{
padding-top:3px;
width:2px;
}

.news_tabsnavli{...}{
color:#18397C;
display:inline;
float:left;
font:normal12px宋体,arial,sans-serif;
letter-spacing:1px;
list-style-type:none;
margin:0;
padding-top:4px;
text-align:center;
width:120px;
}

/**//*导航菜单点击后的样式*/
.news_tabsnav.tabactive1{...}{
background:url(../images/tab_active1.gif);
color:#F26400;
font:bold12px宋体,arial,sans-serif;
height:18px;
letter-spacing:1px;
padding-top:4px;
text-align:center;
width:120px;
}

.news_tabsnav.tabactive3{...}{
background:url(../images/tab_active2.gif);
color:#F26400;
font:bold12px宋体,arial,sans-serif;
height:18px;
letter-spacing:1px;
padding-top:4px;
text-align:center;
width:120px;
}

.news_tabsnav.tabactive5{...}{
background:url(../images/tab_active2.gif);
color:#F26400;
font:bold12px宋体,arial,sans-serif;
height:18px;
letter-spacing:1px;
padding-top:4px;
text-align:center;
width:120px;
}

.news_tabsnav.tabactive7{...}{
background:url(../images/tab_active2.gif);
color:#F26400;
font:bold12px宋体,arial,sans-serif;
height:18px;
letter-spacing:1px;
padding-top:4px;
text-align:center;
width:120px;
}

/**//*最新消息主体*/
.news_content{...}{
border:solid#B0BEC7;
border-width:01px1px1px;
margin:0auto;
width:506px;
}

/**//*推荐新闻列表*/
.news_list{...}{
height:120px;
margin:0auto;
width:492px;
}

.news_listimg{...}{
border:1pxsolid#9EB1C0;
float:left;
height:115px;
margin:0;
padding:1px;
width:154px;
cursor:pointer;
}

.news_list.new_top7{...}{
float:right;
height:120px;
margin:0;
width:325px;
}

.news_list.new_top7li{...}{
float:left;
font:normal13px宋体,sans-serif;
height:12px;
letter-spacing:1px;
list-style-type:none;
margin:0;
padding:005px0!important;
padding:002px0;
width:322px;
}

.news_list.new_top7lia:link,a:visited{...}{
color:#18397C;
}

.news_list.new_top7lia:hover{...}{
color:#FF0000;
}

/**//*LOGO广告*/
.logos{...}{
margin:0auto;
width:488px;
height:44px;
padding:1px!important;
border:1pxsolid#9EB1C0;
}

.logoscnt{...}{
margin:0auto;
width:488px;
height:31px!important;
height:29px;
padding:6px07px0!important;
padding:4px05px0;
text-align:center;
background:url(../images/logos_bg.gif);
}

/**//*基本信息统计*/
.siteinfo{...}{
height:12px;
letter-spacing:1px;
margin:0auto;
padding:4px04px0!important;
padding:2px02px0;
text-align:center;
width:490px;
}

HTML CODE:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>标签导航</title>
<metaname="Author"content="Robert"/>
<linkhref="css/style.css"rel="stylesheet"type="text/css"/>
<scriptlanguage="javascript"type="text/javascript"src="js/function.js"></script>
</head>
<body>
<divclass="sblank2"></div>
<divclass="news_tabsnav">
<ulclass="tabsmenu">
<liclass="tabactive1"style="cursor:pointer"id="tab1"onclick="TabNews('tab',1)">推荐信息</li>
<liclass="tab_sline"style="display:none"id="tab2"><imgsrc="images/tab_sline.gif"alt="分割线"/></li>
<listyle="cursor:pointer"id="tab3"onclick="TabNews('tab',3)">最新折扣信息</li>
<liclass="tab_sline"id="tab4"><imgsrc="images/tab_sline.gif"alt="分割线"/></li>
<listyle="cursor:pointer"id="tab5"onclick="TabNews('tab',5)">最新团够信息</li>
<liclass="tab_sline"id="tab6"><imgsrc="images/tab_sline.gif"alt="分割线"/></li>
<listyle="cursor:pointer"id="tab7"onclick="TabNews('tab',7)">最新活动信息</li>
</ul><divclass="clear"></div>
</div>
<divclass="news_content">
<divid="tab_cnt">
<divclass="sblank2"></div>
<divclass="news_list">
<imgsrc="images/gyy.jpg"alt="推荐图片新闻"width="154"height="115"border="0"/>
<ulclass="new_top7">
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
</ul>
<divclass="clear"></div>
</div>
<divclass="sblank2"></div>
<divclass="logos">
<divclass="logoscnt">
<imgsrc="images/clogo.gif"class="margin-right-left"alt="logo"/><imgsrc="images/clogo.gif"class="margin-right-left"alt="logo"/><imgsrc="images/clogo.gif"class="margin-right-left"alt="logo"/><imgsrc="images/clogo.gif"class="margin-right-left"alt="logo"/><imgsrc="images/clogo.gif"class="margin-right-left"alt="logo"/>
</div>
</div>
</div>
<divclass="siteinfo">
VIP会员共计<spanclass="fcborange">10200</span>家，今日注册<spanclass="fcborange">68</span>人，更新<spanclass="fcborange">5365</span>条信息，当前总在线<spanclass="fcborange">62400</span>人
</div>
</div>
<divclass="sblank2"></div>
<divclass="news_tabsnav">
<ulclass="tabsmenu">
<liclass="tabactive1"style="cursor:pointer"id="news1"onclick="TabNews('news',1)">华夏资讯推荐</li>
<liclass="tab_sline"style="display:none"id="news2"><imgsrc="images/tab_sline.gif"alt="分割线"/></li>
<listyle="cursor:pointer"id="news3"onclick="TabNews('news',3)">华夏动感宝贝</li>
<liclass="tab_sline"id="news4"><imgsrc="images/tab_sline.gif"alt="分割线"/></li>
<listyle="cursor:pointer"id="news5"onclick="TabNews('news',5)">华夏动漫世界</li>
<liclass="tab_sline"id="news6"><imgsrc="images/tab_sline.gif"alt="分割线"/></li>
<listyle="cursor:pointer"id="news7"onclick="TabNews('news',7)">华夏体育世界</li>
</ul><divclass="clear"></div>
</div>
<divclass="news_content">
<divid="news_cnt">
<divclass="sblank2"></div>
<divclass="news_list">
<ahref="#"><imgsrc="images/pic.jpg"alt="推荐图片新闻"width="154"height="115"border="0"/></a>
<ulclass="new_top7">
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
<li><ahref="#">PRG全棉短袖衬衣最后的抢购机抢购机</a>2006-08-15</li>
</ul>
<divclass="clear"></div>
</div>
<divclass="sblank2"></div>
<divclass="logos">
<divclass="logoscnt">
<imgsrc="images/clogo.gif"class="margin-right-left"alt="logo"/><imgsrc="images/clogo.gif"class="margin-right-left"alt="logo"/><imgsrc="images/clogo.gif"class="margin-right-left"alt="logo"/><imgsrc="images/clogo.gif"class="margin-right-left"alt="logo"/><imgsrc="images/clogo.gif"class="margin-right-left"alt="logo"/>
</div>
</div>
</div>
<divclass="siteinfo">
VIP会员共计<spanclass="fcborange">10200</span>家，今日注册<spanclass="fcborange">68</span>人，更新<spanclass="fcborange">5365</span>条信息，当前总在线<spanclass="fcborange">62400</span>人
</div>
</div>
</body>
</html>