Ajax 另类二级联动菜单(DIV+CSS)
from:http://www.flywe.net/article.asp?id=39
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Flywe の Blog - Ajax 另类二级联动菜单(DIV+CSS)</TITLE>
<SCRIPT language=javascript>
var req = null;
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
var node;
function OnClickCate(What,CateID)
{
if(What == null) return
node = document.getElementById("RssCate" + CateID)
node = node.nextSibling
while(node && node.tagName && node.tagName != "DIV")
{
node = node.nextSibling
}
if(node == null) return
var initDisplay = node.style.display;
var RssDIV = document.getElementsByTagName("DIV");
if(RssDIV != null)
{
for(var i = 0;i<RssDIV.length;i++)
{
if(RssDIV[i].className == "RssDIV")
RssDIV[i].style.display = "none";
}
}
if(document.getElementById("RssCate" + CateID).getAttribute("status") != "ok")
{
if(req)
{
var str = null;
node.innerHTML = "正在装载数据……";
node.style.display="block";
surl ='cs/menulist.asp?id='+CateID+'&cDate='+ new Date().getTime();
req.open('GET', surl, true);
req.onreadystatechange = alerttest;
req.send(null);
}
document.getElementById('RssCate'+CateID).setAttribute('status','ok');
}
else
{
node.style.display=(initDisplay == "block"?"none":"block");
}
//node = null;
}
function alerttest()
{
if (req.readyState == 4)
{
if (req.status == 200)
{
node.innerHTML = req.responseText;
}
}
}
</SCRIPT>
<STYLE type=text/css>.CateDIV {
BORDER-RIGHT: #808080 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 9pt; PADDING-BOTTOM: 2px; BORDER-LEFT: #ffffff 1px solid; WIDTH: 300px; CURSOR: pointer; COLOR: #000000; PADDING-TOP: 3px; BORDER-BOTTOM: #808080 1px solid; HEIGHT: 22px; BACKGROUND-COLOR: #ddeeff; TEXT-ALIGN: left
}
.RssDIV {
PADDING-RIGHT: 2px; DISPLAY: none; PADDING-LEFT: 2px; FONT-SIZE: 9pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; BACKGROUND-COLOR: transparent
}
A {
FONT-SIZE: 9pt; COLOR: #000099; TEXT-DECORATION: none
}
A:visited {
COLOR: red
}
A:active {
COLOR: red
}
A:hover {
COLOR: #0000ff
}
</STYLE>
<META content="MSHTML 6.00.3790.1830" name=GENERATOR></HEAD>
<BODY
style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: auto; BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px"
bgColor=#ffffff>
<DIV class=CateDIV id=RssCate1 onclick=OnClickCate(this,1)>Microsoft .NET
技术站点</DIV>
<DIV class=RssDIV></DIV>
<DIV class=CateDIV id=RssCate2 onclick=OnClickCate(this,2)>ASP.NET 技术站点</DIV>
<DIV class=RssDIV></DIV>
<DIV class=CateDIV id=RssCate3 onclick=OnClickCate(this,3)>Visual C# 技术站点</DIV>
<DIV class=RssDIV></DIV>
<DIV class=CateDIV id=RssCate4 onclick=OnClickCate(this,4)>Visual Basic.NET
技术站点</DIV>
<DIV class=RssDIV></DIV></BODY></HTML>
<HTML><HEAD><TITLE>Flywe の Blog - Ajax 另类二级联动菜单(DIV+CSS)</TITLE>
<SCRIPT language=javascript>
var req = null;
if(window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch(e) {
req = false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
req = false;
}
}
}
var node;
function OnClickCate(What,CateID)
{
if(What == null) return
node = document.getElementById("RssCate" + CateID)
node = node.nextSibling
while(node && node.tagName && node.tagName != "DIV")
{
node = node.nextSibling
}
if(node == null) return
var initDisplay = node.style.display;
var RssDIV = document.getElementsByTagName("DIV");
if(RssDIV != null)
{
for(var i = 0;i<RssDIV.length;i++)
{
if(RssDIV[i].className == "RssDIV")
RssDIV[i].style.display = "none";
}
}
if(document.getElementById("RssCate" + CateID).getAttribute("status") != "ok")
{
if(req)
{
var str = null;
node.innerHTML = "正在装载数据……";
node.style.display="block";
surl ='cs/menulist.asp?id='+CateID+'&cDate='+ new Date().getTime();
req.open('GET', surl, true);
req.onreadystatechange = alerttest;
req.send(null);
}
document.getElementById('RssCate'+CateID).setAttribute('status','ok');
}
else
{
node.style.display=(initDisplay == "block"?"none":"block");
}
//node = null;
}
function alerttest()
{
if (req.readyState == 4)
{
if (req.status == 200)
{
node.innerHTML = req.responseText;
}
}
}
</SCRIPT>
<STYLE type=text/css>.CateDIV {
BORDER-RIGHT: #808080 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #ffffff 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 9pt; PADDING-BOTTOM: 2px; BORDER-LEFT: #ffffff 1px solid; WIDTH: 300px; CURSOR: pointer; COLOR: #000000; PADDING-TOP: 3px; BORDER-BOTTOM: #808080 1px solid; HEIGHT: 22px; BACKGROUND-COLOR: #ddeeff; TEXT-ALIGN: left
}
.RssDIV {
PADDING-RIGHT: 2px; DISPLAY: none; PADDING-LEFT: 2px; FONT-SIZE: 9pt; PADDING-BOTTOM: 2px; PADDING-TOP: 2px; BACKGROUND-COLOR: transparent
}
A {
FONT-SIZE: 9pt; COLOR: #000099; TEXT-DECORATION: none
}
A:visited {
COLOR: red
}
A:active {
COLOR: red
}
A:hover {
COLOR: #0000ff
}
</STYLE>
<META content="MSHTML 6.00.3790.1830" name=GENERATOR></HEAD>
<BODY
style="BORDER-RIGHT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: auto; BORDER-LEFT: 0px; PADDING-TOP: 0px; BORDER-BOTTOM: 0px"
bgColor=#ffffff>
<DIV class=CateDIV id=RssCate1 onclick=OnClickCate(this,1)>Microsoft .NET
技术站点</DIV>
<DIV class=RssDIV></DIV>
<DIV class=CateDIV id=RssCate2 onclick=OnClickCate(this,2)>ASP.NET 技术站点</DIV>
<DIV class=RssDIV></DIV>
<DIV class=CateDIV id=RssCate3 onclick=OnClickCate(this,3)>Visual C# 技术站点</DIV>
<DIV class=RssDIV></DIV>
<DIV class=CateDIV id=RssCate4 onclick=OnClickCate(this,4)>Visual Basic.NET
技术站点</DIV>
<DIV class=RssDIV></DIV></BODY></HTML>
