JS多级横向联动选择菜单，模拟淘宝级联效果，这款菜单是模拟淘宝网的，是很早时候的淘宝网，现在已经没有了，本款菜单可以像级联菜单那样一级一级的选择数据，最后确定出数据。 示例： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <title>模拟淘宝网菜单选择</title><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /> <style type="text/css" media="all"><br /> body *{<br /> font-size:14px;<br /> margin:0;<br /> padding:0;<br /> }<br /> #CategorySelector{<br /> clear:both;<br /> width:778px;<br /> height:220px;<br /> background-color:#FFF;<br /> margin-bottom:8px;<br /> }<br /> #CategorySelector ul{<br /> margin:0 3px 0 0;<br /> padding:0;<br /> border:1px solid #CCC;<br /> float:left;<br /> width:189px;<br /> height:218px;<br /> overflow:auto;<br /> }<br /> #CategorySelector ul.Blank{<br /> background-color:#F6F6F6;<br /> }<br /> #CategorySelector li{<br /> list-style-type:none;<br /> width:auto;<br /> height:20px;<br /> margin:0 1px !important;<br /> margin /**/:0 1px 0 -15px;<br /> padding:0;<br /> border:1px solid #FFF;<br /> line-height:20px;<br /> color:#444;<br /> text-indent:3px;<br /> cursor:default;<br /> }<br /> #CategorySelector li.Selected{<br /> background-color:#CAFFC0;<br /> border:1px solid #0A9800;<br /> color:#006623;<br /> }<br /> #CategorySelector li.IsParent{<br /> background-image:url(/uploads/allimg/1110/publishitem_subcate_arrow.gif);<br /> background-position:99% 50%;<br /> background-repeat:no-repeat;<br /> }<br /> #CategorySelector li.RecentUsed{<br /> color:#170;<br /> }<br /> #CategoryTitle{<br /> clear:both;<br /> width:778px;<br /> background-color:#FFF;<br /> }<br /> #CategoryTitle ul{<br /> float:left;<br /> }<br /> #CategoryTitle li{<br /> margin:0 3px 0 0;<br /> float:left;<br /> border:1px solid #CCC;<br /> width:189px;<br /> color:#0063C8;<br /> font-weight:bold;<br /> border-bottom:0px;<br /> height:23px;<br /> line-height:23px;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div id="CategoryTitle"><br /> <ul id="TitleContent"><br /> <li> 选择宝贝类别</li><br /> <li> 选择游戏</li><br /> <li> 选择游戏区域</li><br /> <li> 选择服务器</li><br /> </ul><br /> </div><br /> <div id="CategorySelector"><br /> <ul id="Category_ItemType" class="Blank"><br /> </ul><br /> <ul id="Category_GameType" class="Blank"><br /> </ul><br /> <ul id="Category_GameArea" class="Blank"><br /> </ul><br /> <ul id="Category_GameServer" class="Blank"><br /> </ul><br /> </div><br /> <script language="javascript" type="text/javascript" id="commonjs"><br /> Array.prototype.S = String.fromCharCode(2);<br /> Array.prototype.in_array = function(e)<br /> {<br /> var re = new RegExp(this.S+e+this.S);<br /> return re.test(this.S+this.join(this.S)+this.S);<br /> }<br /> function DataContent()<br /> {<br /> this.Parent; // Parent Tags<br /> this.ParentID;<br /> this.Children; // Children Tags<br /> this.ChildrenID;<br /> }<br /> function DataServer()<br /> {<br /> this.mList = new Array();<br /> this.ListCount = function(){return this.mList.length;}<br /> this.GetListObj = function(n)<br /> {<br /> if (n<this.ListCount()) return this.mList[n];<br /> return null;<br /> }<br /> this.Add = function(sParent,sParentID,sChildren,sChildrenID)<br /> {<br /> obj = new DataContent();<br /> obj.Parent = sParent;<br /> obj.ParentID = sParentID;<br /> obj.Children = sChildren;<br /> obj.ChildrenID = sChildrenID;<br /> this.mList[this.ListCount()] = obj;<br /> }<br /> }<br /> function getTriggerNode(e) {<br /> return (document.all)?event.srcElement:e.target;<br /> }<br /> function getObject(objID)<br /> {<br /> return document.getElementById(objID);<br /> }<br /> function CreateList(objName,objData,objSelected)<br /> {<br /> var listBox = getObject(objName[0]);<br /> if(!listBox) return;<br /> var strOutput = "";<br /> var liClass = "";<br /> var id = 0;<br /> var op_txt = new Array();<br /> var op_val = new Array();<br /> var sub_val = new Array();<br /> if (objSelected[0])<br /> {<br /> for(i=0;i<objData.ListCount();i++)<br /> if(objData.GetListObj(i).ParentID==objSelected[0])<br /> {<br /> id = i;<br /> break;<br /> }<br /> if(i==objData.ListCount()){<br /> listBox.innerHTML="";<br /> listBox.className="Blank";<br /> return false;<br /> }<br /> }<br /> if(objName[1])<br /> for(i=0;i<objName[1].ListCount();sub_val.push(objName[1].GetListObj(i++).ParentID));<br /> tmpobj = objData.GetListObj(id);<br /> if (tmpobj.Children.length==0)<br /> {<br /> for(i=0;i<objData.ListCount();op_txt.push(objData.GetListObj(i).Parent),op_val.push(objData.GetListObj(i++).ParentID));<br /> }<br /> else<br /> {<br /> op_txt = tmpobj.Children;<br /> op_val = tmpobj.ChildrenID;<br /> }<br /> for(i=0;i<op_txt.length;i++)<br /> {<br /> if(sub_val.in_array(op_val[i]))<br /> liClass = "IsParent";<br /> if(op_val[i] == objSelected[1]){<br /> liClass += " Selected";<br /> }<br /> strOutput += '<li id="'+objName[0]+'__'+op_val[i]+'" class="'+liClass+'">'+op_txt[i]+'</li>';<br /> liClass = '';<br /> }<br /> listBox.innerHTML = strOutput;<br /> strOutput = "";<br /> listBox.className="";<br /> }<br /> function changeCategoryStyle(ulID,liCurr){<br /> if(lastSelectItem[ulID]){<br /> lastSelectItem[ulID].className=lastSelectItem[ulID].className.replace("Selected","").replace(/\s+$/,"");<br /> }<br /> liCurr.className += " Selected";<br /> lastSelectItem[ulID] = liCurr;<br /> }<br /> function changeCategory(evnt)<br /> {<br /> var obj = getTriggerNode(evnt);<br /> var obj2 = obj;<br /> if(obj2.nodeName=="DIV") return (0);<br /> if(obj.nodeName != "LI")<br /> obj = obj.parentNode;<br /> while(obj2.nodeName != "UL")<br /> obj2 = obj2.parentNode;<br /> if(obj.nodeName != "LI") return;<br /> changeCategoryStyle(obj2.id,obj);<br /> var parentID = (obj.id).split("__")[1];<br /> switch(obj2.id)<br /> {<br /> case itemtype:<br /> break;<br /> case gametype:<br /> CreateList([gamearea,gameserverData],gameareaData,[parentID,0]);<br /> break;<br /> case gamearea:<br /> CreateList([gameserver,],gameserverData,[parentID,0]);<br /> break;<br /> }<br /> }<br /> var cselect = "CategorySelector";<br /> var itemtype = "Category_ItemType";<br /> var gametype = "Category_GameType";<br /> var gamearea = "Category_GameArea";<br /> var gameserver = "Category_GameServer";<br /> var lastSelectItem = {itemtype:new Object(),gametype:new Object(),gamearea:new Object(),gameserver:new Object()};<br /> var itemtypeData = new DataServer();<br /> itemtypeData.Add("武器",1,[],[]);<br /> itemtypeData.Add("防具",2,[],[]);<br /> var gametypeData = new DataServer();<br /> gametypeData.Add("魔力宝贝",1,[],[]);<br /> gametypeData.Add("仙境传说",2,[],[]);<br /> var gameareaData = new DataServer();<br /> gameareaData.Add("魔力宝贝",1,["天歇","牧羊"],[1,2]);<br /> gameareaData.Add("仙境传说",2,["上海","北京"],[3,4]);<br /> var gameserverData = new DataServer();<br /> gameserverData.Add("天歇",1,["平顶","山顶"],[1,2]);<br /> gameserverData.Add("牧羊",2,["平顶2","山顶2"],[3,4]);<br /> //gameserverData.Add("上海",3,["sfdsadfas","sdf"],[5,6]);<br /> gameserverData.Add("北京",4,["asdf","asdff"],[7,8]);<br /> CreateList([itemtype,],itemtypeData,[0,0]);<br /> CreateList([gametype,gameareaData],gametypeData,[0,0]);<br /> getObject(cselect).onclick = changeCategory;<br /> </script><br /> </body><br /> </html><br /><hr style="color:#999;height:1px;width:98%">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a>提示：可修改后代码再运行! 文章导航 一款普通的Tab网页选项卡切换，js+css代码黑色大气的网站顶部导航菜单，来自IBM官网
