网(LieHuo.Net)教程 很多网站上都在友情链接位置使用了下拉菜单的效果,下拉菜单可以有效节省网页布局空间,同时又可以被搜索引擎抓取,是非常不错的html形式,说到友情链接的下拉菜单是比较简单的,因为它不需要分级!今天我们就来看一下可以利用js分级的下拉菜单,欢迎各位朋友经常到LIEHUO来学习与交流!
图片演示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE>利用javascript打造的分级下拉菜单 - LIEHUO.NET</TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT=""></HEAD><BODY><xml classid="1" parentid="" version='cn'>网站教程</xml><xml classid="2" parentid="" version='cn'>站长论坛</xml><xml classid="3" parentid="" version='cn'>站长工具</xml><xml classid="4" parentid="2" version='cn'>站长专区====</xml><xml classid="5" parentid="3" version='cn'>收录查询====</xml><xml classid="6" parentid="5" version='cn'>百度收录====</xml><xml classid="7" parentid="5" version='cn'>谷歌收录====</xml><xml classid="8" parentid="5" version='cn'>综合收录====</xml><xml classid="9" parentid="4" version='cn'>链接交换====</xml><xml classid="10" parentid="3" version='cn'>alexa查询====</xml><SCRIPT LANGUAGE="JavaScript">//##################################################################################function Stack(){ this.__DataItem=new Array; this.length=0; this.__StackPointer=-1;}Stack.prototype.Push=function (data){ this.length++; this.__StackPointer++; this.__DataItem[this.__StackPointer]=data;}Stack.prototype.Pop=function (){ if(this.length<=0) return null; if(this.__StackPointer<=-1) return null; this.length--; this.__StackPointer--; return this.__DataItem[this.__StackPointer+1];}Stack.prototype.toString=function (){ try{var chr=arguments[0]}catch(e){var chr=''}finally{ if(typeof(chr)!='string') chr='';} if(this.length<=0) return ""; var retStr=""; for(var iCnt=0;iCnt<this.length;iCnt++) retStr+=this.__DataItem[iCnt]+chr; return retStr;}Stack.prototype.Item=function (ind){ if(ind<0) return null; if(ind>this.__StackPointer) return null; return this.__DataItem[ind];}Stack.prototype.Top=function(){ if(this.__StackPointer<0) return null; return this.__DataItem[this.__StackPointer];}</SCRIPT><SCRIPT LANGUAGE="JavaScript"><!--//var oData = document.getElementsByTagName('xml');function DrawSelector(selName,fnOnChange){ var gStack=new Stack(); function BuildTree(object,iGrade,bolCont) { var fla = hasChildItem(object); document.write ('<option value="'+object.classid+'">'); document.write (gStack.toString()); document.write (object.innerHTML+' </option>'); var oNodeTemp = getChildren(object); if(fla){ if(iGrade>0) {gStack.Pop(); if(bolCont) gStack.Push('│'); else gStack.Push(' ');} gStack.Push(' '); for(var iCnt=0;iCnt<oNodeTemp.length;iCnt++){ if(iCnt==oNodeTemp.length-1){ gStack.Push('└'); BuildTree(oNodeTemp[iCnt],iGrade+1,false); gStack.Pop(); }else{ gStack.Push('├'); BuildTree(oNodeTemp[iCnt],iGrade+1,true); gStack.Pop(); } } gStack.Pop(); } } ///////////////////////////////////////////////////////////////////////////// if(fnOnChange) document.write ('<select name="'+selName+'" onchange="'+fnOnChange+'">'); else document.write ('<select name="'+selName+'">'); document.write('<option value="">===网教程===</option>'); var oData = getTopLevelItems(); //所有父级为空的节点 for(var iCnt=0;iCnt<oData.length;iCnt++){ if(iCnt==oData.length-1){ BuildTree(oData[iCnt],0,false); }else{ BuildTree(oData[iCnt],0,true); } } document.write ('</select>');}function hasChildItem(object){ if(object == null) return false; var hasChild = false; var oData = getAllItems(); if(oData != null) { for(var i=0;i<oData.length;i++) { if(oData[i].parentid == object.classid) hasChild = true; } } return hasChild;}function getChildren(object){ if(object != null) { var children = new Array(); var oData = getAllItems(); for(var i=0;i<oData.length;i++) { if(object.classid == oData[i].parentid) children.push(oData[i]); } return children; } else { return null; }}function getTopLevelItems(){ var obj = new Array(); var oData = getAllItems(); for(var i=0;i<oData.length;i++) { if(oData[i].parentid == '') obj.push(oData[i]); } return obj;}function getAllItems(){ var oData = document.getElementsByTagName('xml'); return oData;}DrawSelector('selDepart','window.alert(this.value)');//--></SCRIPT></BODY></HTML><br /><center>网更多教程,请访问:<a href=http://www.wfuyu.com/ target=_blank _fcksavedurl="http://www.wfuyu.com/ target=_blank">http://www.wfuyu.com/</a></center>提示:可修改后代码再运行!
上一篇 MYSQL 命令行导入SQL数据的详细操作
下一篇 非Access数据库在VB中的编程及应用