JS实现树形选择器
这个简单,我写了段代码,你copy过去看下是不是你要的效果!望采纳!!制作树形菜单div{/*隐藏层*/display:none;}a {/*文字链接的背影样式*/font-size:13px;color: #ffffff;text-decoration: none;background-color:#669933;width:100px;line-height:25px;text-align:center;display: block;border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;}a:hover {/*鼠标在文字链接上时的文字背景样式*/font-size:13px;color: #ffffff;background-color:#ee9d01;width:100px;text-align:center;display: block;}function show(d){document.getElementById(d).style.display='block'; //显示层}function hide(d){document.getElementById(d).style.display='none'; //隐藏层}<&#47;script>手机数码淘宝集市品牌商城手机数码1手机数码2手机数码3淘宝集市1淘宝集市2淘宝集市3品牌商城1品牌商城2品牌商城3
求JS树形控件和用法,有的请赐教
var lastFaqClick=null;var expandIndex = 1; //设置展开一个window.onload=function(){var faq=document.getElementById("faq");var dls=faq.getElementsByTagName("dl");for (var i=0,dl;dl=dls[i];i++){var dt=dl.getElementsByTagName("dt")[0];//取得标题dt.id = "faq_dt_"+(Math.random()*100);dt.onclick=function(){var p=this.parentNode;//取得父节点if (lastFaqClick!=null&&lastFaqClick.id!=this.id){var dds=lastFaqClick.parentNode.getElementsByTagName("dd");for (var i=0,dd;dd=dds[i];i++)dd.style.display='none';}lastFaqClick=this;var dds=p.getElementsByTagName("dd");//取得对应子节点,也就是说明部分var tmpDisplay='none';if (gs(dds[0],'display')=='none')tmpDisplay='block';for (var i=0;i<dds.length;i++)dds[i].style.display=tmpDisplay;}if(i == expandIndex){dt.onclick();}}} //你是页面之间传递参数 还是你用脚本点击按钮等传递参数?//页面传递的话你直接修改expandIndex值 如果用js修改expandIndex值你再重新调用这函数 也就是重新绑定点击事件 方法很多你随便想想就会有的
html与js 如何实现树形菜单
展开全部 用z-tree插件①带有父子关系的标准 zTreeNodes 举例: Js代码1.var zTreeNodes = [ 2.{"id":1, "name":"test1", "nodes":[ 3.{"id":11, "name":"test11", "nodes":[ 4.{"id":111, "name":"test111"} 5."id":12, "name":"test12"} ②带有父子关系的简单 Array 格式(isSimpleData)的zTreeNodes 举例:Js代码1.var treeNodes = [ 2. {"id":1, "pId":0, "name":"test1"}, 3.{"id":11, "pId":1, "name":"test11"}, 4. {"id":12, "pId":1, "name":"test12"}, 5. {"id":111, "pId":11, "name":"test111"}, 例子:(Java代码) ①在页面引用zTree的js和css:Html代码1. 2./Web/common/css/zTreeStyle/zTreeStyle.css"type="text/css">3./Web/common/css/zTreeStyle/zTreeIcons.css" type="text/css"> --> 4./Web/common/js/jquery-ztree-2.5.min.js">...
js改变树形框属性
首先说树形结构,国内有个开源的js控件叫zTree,支持复选。
展开全部然后下拉框你可能需要自己做一个(html输入框+右边的一个图标按钮)。
最后,用一个隐藏的div把树形结构包起来,这个div设置成绝对定位,在下拉框右侧选择按钮的单击事件处理函数里,显示这个隐藏的div,并把它的位置设置成在下拉框下面就行了。
思路就是这样,要么楼主可以找找有没有其他更现成的控件,extjs4我记得有类似的,但是他的复选功能不太符合中国习惯,也许现在的版本改好了,你可以查查试试看。
...
请问这种树形结构的导航栏用html或者js怎么实现?
无标题文档 body{ font-size:14px; margin:0;} div{ width:auto; height:auto; line-height:150%;} ul{ list-style:none; margin-left:-20px;} ul li:hover{ background-color:#DDDDDD; color:#FF0000; cursor:pointer;}//模拟数据 var jsonData = [ {"id":"1","name":"父节点1","url":"www.baidu.com","pid":"0"},{"id":"4","name":"父节点11","url":"","pid":"1"},{"id":"13","name":"父节点111","url":"","pid":"4"},{"id":"14","name":"父节点112","url":"","pid":"4"},{"id":"5","name":"父节点12","url":"","pid":"1"},{"id":"6","name":"父节点13","url":"","pid":"1"},{"id":"2","name":"父节点4","url":"","pid":"0"},{"id":"7","name":"父节点41","url":"","pid":"2"},{"id":"8","name":"父节点42","url":"","pid":"2"},{"id":"9","name":"父节点43","url":"","pid":"2"},{"id":"3","name":"父节点5","url":"","pid":"0"},{"id":"10","name":"父节点51","url":"","pid":"3"},{"id":"11","name":"父节点52","url":"","pid":"3"},{"id":"12","name":"父节点53","url":"","pid":"3"} ] ;//主方法,运用递归实现 function createTree(jsons,pid){ if(jsons != null){ var ul = '' ; for(var i=0;iif(jsons[i].pid == pid){ ul += '' + jsons[i].name + "" ; ul += createTree(jsons,jsons[i].id) ; } } ul += "" ; } return ul ; }$(function(){ var ul = createTree(jsonData,0) ;$("#continer").append(ul) ;//控制菜单的隐藏显示$("ul[class] li").each(function(){$(this).click(function(){$(this).next().toggle() ; }) ; }) ; }) ;
转载请注明出处51数据库 » 通用软件模板 js树形