AJAX仿网易导航

最新推荐文章于 2025-09-05 23:01:36 发布

dufenglei123

最新推荐文章于 2025-09-05 23:01:36 发布

阅读量1.2k

点赞数

文章标签： ajax function div class border url

在网上找了半天才找到的,这个导航现在用的好多,有好多地方可以借鉴,下面就是主要的代码

TAB.HTML

---------------------------------------------------------------------------------------

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head >

< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />

< title > 标签导航_lorlo.com </ title >

< meta content ="标签导航" name ="Keywords" />

< meta content ="这是一个标签导航效果" name ="Description" />

< meta name ="Author" content ="Robert" />

< link href ="tab/css/style.css" _fcksavedurl ="" tab/css/style.css"" rel ="stylesheet" type ="text/css" />

< script language ="javascript" type ="text/javascript" src ="tab/js/function.js" ></ script >

</ head >

< base target ="_blank" />

< body >

< div class ="sblank2" ></ div >

< div id ="tab_mn" class ="news_tabsnav" >

< ul class ="tabsmenu" >

< span id ="tabtab_cnt" class ="class_title" onclick ="showClassList('tab_cnt')" ></ span >

< li class ="tabactive1" id ="tab1" >< a href ="channel3.html" > 日记 </ a ></ li >

< li id ="tab2" >< a href ="tab/index.html" > 民间 </ a ></ li >

< li id ="tab3" >< a href ="channel3.html" > 知识 </ a ></ li >

< li id ="tab4" >< a href ="channel4.html" > 娱乐 </ a ></ li >

</ ul >

< div class ="clear" ></ div >

</ div >

< div class ="news_content" >

< div id ="tab_cnt" >

< noscript >

< a href =http://www.smcpark.com >< img src ="tab/images/tpa1.jpg" alt ="日月峡风景" width ="154" height ="115" border ="0" /></ a >

</ noscript >

</ div >

< div class ="siteinfo" > ↑鼠标单击触发↑ </ div >

</ div >

< div class ="sblank2" ></ div >

< div id ="news_mn" class ="news_tabsnav" >< span id ="tabnews_cnt" class ="class_title" onclick ="showClassList('news_cnt')" ></ span >

< ul class ="tabsmenu" >

< li class ="tabactive1" id ="news1" >< a href ="http://cn.arkoo.com/" > 搞笑频道 </ a ></ li >

< li id ="news2" >< a href ="tab/index.html" > 搞笑图片 </ a ></ li > _fcksavedurl=""tab/index.html">搞笑图片 </ a ></ li > "

< li id ="news3" >< a href ="http://e-file.arkoo.com/" > 搞笑FLASH </ a ></ li >

< li id ="news4" >< a href ="http://www.lorlo.com/" > 搞笑图文 </ a ></ li >

< li id ="news5" >< a href ="http://www.lorlo.com/" > 搞笑视频 </ a ></ li >

</ ul >

< div class ="clear" ></ div >

</ div >

< div class ="news_content" >

< div id ="news_cnt" >

< noscript >

< a href =http://www.smcpark.com >< img _fcksavedurl ="http://www.smcpark.com><img" src ="tab/images/tpb1.jpg" alt ="日月峡风景" width ="154" height ="115" border ="0" /></ a >

</ noscript >

1111111111111111111111111 </ div >

< div class ="siteinfo" > ↑鼠标滑过触发↑ </ div >

</ div >

< div style ="text-align:center;" > 更新时间： < span id ="pdate" ></ span ></ div >

< script type ="text/javascript" >

<!--

aet("tab",1); //aet("标签组",触发类型)。其中，触发类型：1-单击触发、0-鼠标滑过触发

aet("news",0); //本例中，有tab、news两组标签：tab-[日记][民间][知识][娱乐]、news-[资讯][科技][E-file][站内][乐][新闻][评论]

//-->

</ script >

</ body >

</ html >

-----------------------------------------------------------------

function.js

---------------------------------------------------------------------

function getObject(objectId) {

if(document.getElementById && document.getElementById(objectId)) {

// W3C DOM

return document.getElementById(objectId);

}

else if (document.all && document.all(objectId)) {

// MSIE 4 DOM

return document.all(objectId);

}

else if (document.layers && document.layers[objectId]) {

// NN 4 DOM.. note: this won't find nested layers

return document.layers[objectId];

}

else {

return false;

}

var responsecont;

var xmlHttp;

var xH = new Object();

var rqtp = new Object();

var dateStr,dStr;

var requestType;

var etype = 0 ;

var newsstring;

var ajccache = new Object();

var url;

var MouseDelayTime = 200 ; // 鼠标感应延迟

var waitInterval;

var Browser = new Object();

Browser.isMozilla = ( typeof document.implementation != ' undefined ' ) && ( typeof document.implementation.createDocument != ' undefined ' ) && ( typeof HTMLDocument != ' undefined ' );

Browser.isIE = window.ActiveXObject ? true : false ;

Browser.isFirefox = (navigator.userAgent.toLowerCase().indexOf( " firefox " ) !=- 1 );

Browser.isOpera = (navigator.userAgent.toLowerCase().indexOf( " opera " ) !=- 1 );

function SetCookie(name,value,expires) {//写cookie

var exp=new Date();

exp.setTime(exp.getTime()+expires*60000);

document.cookie=name+"="+escape(value)+";expires="+exp.toGMTString();//+";domain=arkoo.com;path=/";

}

function readcookie(name) {//读取cookie

var oRegex=new RegExp(name+'=([^;]+)','i');

var oMatch=oRegex.exec(document.cookie);

if(oMatch&&oMatch.length>1)return unescape(oMatch[1]);

else return '';

}

function CreateXMLHttpRequest() {

// Initialize Mozilla XMLHttpRequest object

if (window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest();

}

// Initialize for IE/Windows ActiveX version

else if (window.ActiveXObject) {

try{

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP.3.0");

}

catch (e){

try{

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

catch (e){newsstring = "<div class='loading'>Loading rquest content fail, Please try it again latter...</div>";}

}

function getnews(tagid,x) {

url = "tab/"+tagid+'_'+x+'.html';

var url2=url;

requestType = tagid;

if(ajccache[url]==null){

var loadstatustext="<div class='loading'><img src='tab/images/loading.gif' /> Loading request content, please wait...</div>";

rqtp[tagid]=tagid;

CreateXMLHttpRequest();

var hdr=tagid;

xH[tagid]=xmlHttp;

if(etype==1)getObject(requestType+'_cnt').innerHTML = loadstatustext;

xH[tagid].onreadystatechange = function(){

// only if xmlHttp shows "complete"

if (xH[tagid].readyState == 4){

// only http 200 to process

if (window.location.href.indexOf("http")==-1 || xH[tagid].status == 200){

newsstring = xH[tagid].responseText;

dateStr=xH[tagid].getResponseHeader("Date");

dStr = new Date(dateStr);SetCookie('dStr',dStr,10000000);

//inject centent to tab-pane

shownews(rqtp[tagid],newsstring);

ajccache[url2]=newsstring;

}

xH[tagid].open("GET", url, true);

xH[tagid].setRequestHeader("If-Modified-Since","0");

xH[tagid].send(null);

}

else

{shownews(requestType,ajccache[url]);}

}

function shownews(requestType,newsstring) {

//<![CDATA[

responsecont = getObject(requestType+'_cnt');

responsecont.innerHTML = newsstring;

getObject("pdate").innerHTML=dStr;

if(getObject("alta")){ata(getObject("alta"));hideText();}

//]]>

}

function TabNews(tagid,x) {

var lim=getObject(tagid+"_mn").getElementsByTagName('li');

var mnt=getObject(tagid+"_mn").getElementsByTagName('li').length;

if(!mnt)mnt=4;

for(var i=0;i<mnt;i++){

if(i == (x-1)){

if(i==0){

lim[i].className="tabactive1";

}

else{

lim[i].className="tabactive2";

lim[i-1].getElementsByTagName('a')[0].style.background="url()";

}

lim[i].getElementsByTagName('a')[0].style.background="url(tab/images/tab_bgs.gif) right -60px no-repeat";

try{getnews(tagid,x);}catch(e){alert(e);}

}

else{

lim[i].className="";

lim[i].getElementsByTagName('a')[0].style.background="url(tab/images/tab_bgs.gif) right -88px no-repeat";

}

var idn,tmpa,tmpat;

var aw = "" ;

var rT;

function aet(tagid,etp) {

var lis=getObject(tagid+"_mn").getElementsByTagName('li');

var wts=tagid+"_cnt";

var wnf=tagid+"info";

if(readcookie(tagid+"_cntd")=="none"){

hiddenList(getObject(wts));

maxh[wts]=readcookie(tagid+"_cnth");

getObject("pdate").innerText=readcookie("dStr");

}

else{

if(parseInt(readcookie(wnf))>1)

TabNews(tagid,readcookie(wnf));//返回上次访问

else

TabNews(tagid,1);

if(etp==1)aw=tagid+readcookie(wnf);

}

for(var iy=0;iy<lis.length;iy++){

with(lis[iy]){

if(etp==0){

lis[iy].onmouseover=function(){

rT=attributes.getNamedItem('id').value.substring(0, attributes.getNamedItem('id').value.length-1);

if(getObject(rT+'_cnt').style.display != "none"&&className!="") return;

idn=parseInt(attributes.getNamedItem('id').value.substring(attributes.getNamedItem('id').value.length-1, attributes.getNamedItem('id').value.length));

clearTimeout(waitInterval);

waitInterval=window.setTimeout("etype=0;TabNews(rT,idn);if(getObject(rT+'_cnt').style.display == 'none')displayList(rT+'_cnt'); SetCookie(rT+'info',idn,10000000);SetCookie(rT+'_cntd','ture',10000000);",MouseDelayTime);

}

lis[iy].onmouseout=function(){if(getObject(rT+'_cnt').style.display != "none"&&className!="") return;clearTimeout(waitInterval);}

}

if(etp==1){

lis[iy].onmouseover=function(){getElementsByTagName('a')[0].blur();}

lis[iy].onclick=function(){

idn=parseInt(attributes.getNamedItem('id').value.substring(attributes.getNamedItem('id').value.length-1, attributes.getNamedItem('id').value.length));

rT=attributes.getNamedItem('id').value.substring(0, attributes.getNamedItem('id').value.length-1);

if(getObject(rT+'_cnt').style.display != "none"&&(idn==1&&(this.className=="tabactive1")||aw==attributes.getNamedItem('id').value)) return true;

if(getObject(rT+'_cnt').style.display == "none"){

displayList(rT+'_cnt');SetCookie(rT+'_cntd','ture',10000000);

}

etype=1;

TabNews(rT,idn);

SetCookie(rT+'info',idn,10000000);

aw=attributes.getNamedItem('id').value;

getElementsByTagName('a')[0].blur();

return false;

}}}

}

function ata(objid) {

var as=objid.getElementsByTagName('a');

for(var i=0;i<as.length;i++){

as[i].target="_self";

}

function GetUrlParam(paramName) { //获取URL参数的函数

var oRegex = new RegExp('[?&]' + paramName + '=([^&]+)', 'i');

var oMatch = oRegex.exec(window.location.search);

if(oMatch && oMatch.length > 1)

return oMatch[1];

else

return '';

}

function hideText() {

if(document.getElementsByTagName("arkoo:title").length==0){

var upu=GetUrlParam("username");

var upa=GetUrlParam("articleid");

getObject("closeit").innerHTML='<a href="http://cn.arkoo.com/diaryfiles/showpage.aspx?username='+upu+'&articleid='+upa+'" target="_blank">查看原文</a> <a href="tab.html" target="_self">×</a>';

}

var maxh = new Object();

// 显示内容框

function displayList(oid) {

var h = 0;

var objid=getObject(oid);

if(isNaN(parseInt(maxh[oid]))) var max_h = 210; // 容器的最大高度

else

var max_h = maxh[oid];

var anim = function(){

h += 50; // 每次递增50像素

if(h >= max_h){

objid.style.height = max_h + "px";;

getObject('tab'+objid.attributes.getNamedItem('id').value).style.background="url(tab/images/tab_bgs.gif) 5px -113px no-repeat"; // 让图片标签改变背景

if(tt){window.clearInterval(tt);}

}

else{

objid.style.display="block";

objid.style.height = h + "px";

}

var tt = window.setInterval(anim,2);

}

// 隐藏列表框

function hiddenList(objid) {

var h = objid.offsetHeight;

var anim = function(){

h -= 50; // 每次递减50像素

if(h <= 5){

objid.style.display="none";

getObject('tab'+objid.attributes.getNamedItem('id').value).style.background="url(tab/images/tab_bgs.gif) -14px -114px no-repeat";

if(tt){window.clearInterval(tt);}

}

else{

objid.style.height = h + "px";

}

var tt = window.setInterval(anim,2);

}

function showClassList(oid) {

var objid=getObject(oid);

if(objid.style.display == "none"){

if(objid.getElementsByTagName("img").length==0)TabNews(oid.substring(0,oid.indexOf("_")),1);

displayList(oid); // 显示内容框

SetCookie(oid+'d',"ture",10000000);

}

else{

if(isNaN(parseInt(maxh[oid]))){

if(Browser.isFirefox){

maxh[oid]=objid.offsetHeight;

}

else{

maxh[oid]=objid.offsetHeight; // 内容容器的初始高度

}

hiddenList(objid); // 隐藏内容框

SetCookie(oid+'d',"none",10000000);SetCookie(oid+'h',maxh[oid],10000000);

}

---------------------------------------------

style.css

-------------------------------------------------------------

body { margin: 0 auto;width:600px;padding: 0;background: #FFF;color: #000;font: normal 12px 宋体,arial,sans-serif;text-align: left;}

div,form,ul,ol,li,span,p {border: 0;margin: 0;padding: 0;}

/*清除float*/

.clear { clear: both; font-size:1px; visibility: hidden; }

/*空格*/

.blank2 {font-size: 1px;height: 2px;margin: 0 auto;width: 100%;}

.blank5 {font-size: 1px;height: 5px;margin: 0 auto;width: 100%;}

.sblank2 {font-size: 1px;height: 2px;margin: 0 auto;width: 100%;}

.sblank3 {font-size: 1px;height: 3px;margin: 0 auto;width: 100%;}

.sblank5 {font-size: 1px;height: 5px;margin: 0 auto;width: 100%;}

.sblank7 {font-size: 1px;height: 7px;margin: 0 auto;width: 100%;}

/*边距*/

.margin-right {margin-right: 6px;}

.margin-right-left {margin-right: 3px; margin-left:3px;}

/*字体颜色*/

.fcborange {color: #F0741A;font: bold 12px arial,sans-serif;}

.fcred {color:#FF0000;}

.fcwhite {color:#FFF;font:normal 13px 宋体,arial,sans-serif;letter-spacing:1px;}

.class_title {float:right;

margin: 0 auto;

width: 14px;

height: 17px;

border: 1px solid #9EB1C0;

padding: 1px;

cursor:pointer;

background:url(../images/tab_bgs.gif) 5px -113px no-repeat;

}

#news_cnt,#tab_cnt {

display: block;

overflow:hidden;

}

/*新闻标签导航*/

.news_tabsnav {

background:#ffffff url(../images/tab_bgs.gif) left -140px repeat-x;

border: solid #B0BEC7;

border-width: 0 1px 0 1px;

height: 22px;

margin: 0 auto;

padding: 0;

width: 474px;

}

.news_tabsnav .tabsmenu {

height: 22px;

}

.news_tabsnav .tab_sline {

padding-top: 3px;

width: 2px;

}

.news_tabsnav li {

color: #18397C;

float:left;

display:inline;

font: normal 12px 宋体,arial,sans-serif;

list-style-type: none;

margin:0;

text-align: center;

}

.news_tabsnav li a {

display:block;

float:left;

padding:4px 32px 0 32px;/*链接左右补白宽度，若要固定宽度，些句可改为：padding-top:4px;width:100px;*/

padding-top:4px;

height:18px;

background:url(../images/tab_bgs.gif) right -88px no-repeat;

}

#news_mn li a {padding:4px 16px 0 16px;} /*news组标签链接左右补白宽度*/

/*导航菜单点击后的样式

border:1px #111 solid;*/

.news_tabsnav .tabactive1 {

background: url(../images/tab_bgs.gif);

color: #F26400;

}

.news_tabsnav .tabactive1 a {background:url(../images/tab_bgs.gif) right -60px no-repeat;}

.news_tabsnav .tabactive2 {

background: url(../images/tab_bgs.gif) left -30px no-repeat;

color: #F26400;

}

/*最新消息主体*/

.news_content {

clear:both;

border: solid #B0BEC7;

border-width: 0 1px 1px 1px;

margin: 0 auto;

width: 474px;

}

.news_content .li1a li a {display:block;float:left;width:210px;overflow: hidden; text-overflow:ellipsis; white-space:nowrap;}

.news_content .li1a a:hover {background-color:#fff0f0;}

.news_content .li1a2 li a {display:block;float:left;width:160px;overflow: hidden; text-overflow:ellipsis; white-space:nowrap;}

.news_content .li1a2 a:hover {background-color:#fff0f0;}

.rightmore {float:right;width:200px;text-align:right;}

/*推荐新闻列表*/

.news_list {

height: 120px;

margin: 0 auto;

width: 460px;

}

.news_list img {

border: 1px solid #9EB1C0;

float: left;

height: 115px;

margin: 0;

padding: 1px;

width: 154px;

cursor: pointer;

}

.news_list .new_top7 {

float: right;

height: 106px;

margin: 0;

width: 290px;

}

.news_list .new_top7 li {

float: left;

font: normal 13px 宋体,sans-serif;

height: 12px;

list-style-type: none;

margin: 0;

padding: 0 0 5px 0!important;

padding: 0 0 2px 0;

width: 290px;

}

.news_list .new_top7 li a:link,a:visited {

color: #18397C;

}

.news_list .new_top7 li a:hover {

color: #FF0000;

}

/*LOGO广告*/

.logos {

margin: 0 auto;

width: 458px;

padding: 1px !important;

border: 1px solid #9EB1C0;

}

.logoscnt {

margin: 0 auto;

width: 458px;

padding: 6px 0 7px 0 !important;

padding: 4px 0 5px 0;

text-align: center;

background: url(../images/tab_bgs.gif) 0 -170px repeat-x;

}

.logoscnt img {border:0}

/*基本信息统计*/

.siteinfo {

height: 12px;

letter-spacing: 1px;

margin: 0 auto;

padding: 4px 0 4px 0 !important;

padding: 2px 0 2px 0;

text-align: center;

width: 460px;

}

.loading {

margin:0 auto;

padding-top:77px;

padding-bottom:77px;

width:460px;

height:18px;

text-align:center;

}

/*链接样式*/

a:link {color: #000;text-decoration: none;}

a:visited {color: #000;text-decoration: none;}

a:hover {color: #16387C;text-decoration: underline;}

----------------------------------------------