图示效果：演示地址：http://demo.jb51.net/js/menu_jquery/index.html下载地址：http://xiazai.jb51.net/201011/yuanma/menu_jquery.rarOutlookBar.js 复制代码 代码如下: function OutlookBar(targetName)//targetName:右侧iframe的name { //创建标题 this.AddTitle=function(menuid,menutitle,openor){ $("body").append("<div id="+menuid+" class='menu_down' ><span>"+menutitle+"</span></div><div id=child_"+menuid+" class='menuChild'></div><div class='jiange'></div>"); if(openor==false) { $("#child_"+menuid).hide(); $("#"+menuid).removeClass("menu_down"); $("#"+menuid).addClass("menu_up"); } $("#"+menuid).click(function(){ if(openor==false){ $("#child_"+menuid).slideDown("fast"); $("#"+menuid).removeClass("menu_up"); $("#"+menuid).addClass("menu_down"); openor=true; } else { $("#child_"+menuid).slideUp("fast"); $("#"+menuid).removeClass("menu_down"); $("#"+menuid).addClass("menu_up"); openor=false; } }) } //创建子项 this.AddItem=function(menuid,menuchildtext,childurl){ $("#child_"+menuid).append("<li><a target='"+targetName+"' href='"+childurl+"'>"+menuchildtext+"</a></li>"); } } 使用创建导航条 复制代码 代码如下: <script type="text/javascript"> $(function(){ var cc=new OutlookBar('BoardList');//targetName:右侧iframe的name cc.AddTitle('a','搜索引擎',true);//ID名，显示名，是否打开状态 cc.AddItem('a','百度','http://baidu.com'); cc.AddItem('a','google','http://google.com'); cc.AddTitle('b','门户网站',false); cc.AddItem('b','脚本编程','http://www.jb51.net'); cc.AddItem('b','素材','http://sc.jb51.net'); $("div").addClass("divwidth"); }); </script>

　　推荐阅读

　　jquery 学习之二 属性相关

attr(name) 取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined 。 Access a property on the first matched element. This method>>>详细阅读

本文标题：基于jquery的一个OutlookBar类，动态创建导航条

地址：http://www.17bianji.com/kaifa2/JS/25387.html

 1/2    1