JavaScript跳转菜单(一级，二级，三级)
来源：互联网 发布：单片机pcb原理图 编辑：程序博客网 时间：2024/05/01 00:19
A一级跳转菜单
一面向对象方法
<html>
<head>
<title>对象跳转菜单</title>
<script language="javascript">
<!--Begin
//建立对象
function Page(name, url){
this.name=name;
this.url=url;
}
//跟踪且保存对象
var pageIndex=-1;
var pages=new Array();
//构造对象方法
function newPage(name, url){
pageIndex++;
pages[pageIndex]=new Page(name, url);
}
//回载网网页
function gotoPage(page){
if(page>0)
var url=pages[pageIndex].url;
if(url!=null)
window.location=url;
}
//实例化对象
newPage("中国新浪","http://www.sina.com.cn");
newPage("中国软件","http://www.cscn.net");
newPage("google搜索","http://www.google.com");
//End-->
</script>
</head>
<body>
<script language="javascript">
document.write("<form >");
document.write("<select onChange='gotoPage(this.selectedIndex);'>");
document.write("<option>"+"网页选项"+"</option>");
for(var i=0; i<pages.length; i++){
document.write("<option>"+pages.name+"</option>");
}
document.write("</select></form>");
</script>
</body>
</html>
非面向对象方法01
<html>
<head>
<title>非对象方法跳转菜单</title>
<script language="javascript">
<!--Begin
var web=new Array();
web[0]="资源键接";
web[1]="google";
web[2]="中国软件";
web[3]="中国亿邮";
web[4]="中国新浪";
web[5]="QQ网";
var url=new Array();
url[0]=" ";
url[1]="http://www.google.com";
url[2]="http://www.csdn.net/";
url[3]="http://www.eyou.com";
url[4]="http://www.sina.com";
url[5]="http://www.myqq.com";
function gotoPage(form){
var urlId=form.item.selectedIndex;
if(urlId!=0)
window.location=url[urlId];
}
//End-->
</script>
</head>
<body>
<script language="javascript">
<!--Begin
document.write("<form name='menu'>");
document.write("<select name='item' onChange='gotoPage(this.form);'>");
for(var i=0; i<url.length; i++){
document.write("<option>"+web+"</option>");
}
document.write("</select></form>");
//End-->
</script>
</body>
</html>
非面向对象方法02
<html>
<head>
<title>非对象法实现跳转菜单</title>
</head>
<body>
<form name="free" method="post">
<select id="select1" name="select1" onchange="window.open(free.select1.options [selectedIndex].value,target='_blank','top=20,left=200,width=500,height= 460,scrollbars=yes,resizable=yes')">
<option selected>请选择一项</option>
<option value="beijing.asp">北京</option>
<option value="shanhai.asp">上海</option>
<option value="tianjin.asp">天津</option>
<option value="shenzhen.asp">深圳</option>
<option value="guangzhou.asp">广州</option>
</select></form>
</body></html>
-------------------------------------------------------------------------------
B.二级跳转菜单(原理篇)
一阅读群：有一定
编程基础，有js基础。
二。。建立二级关联菜单。主要由二个自定义对象组成。即Type(name)和Item(name, url)类组成。由方法relateObj(type)把这二个类进行关联。由二维数组types进行存储数据。方法gotoPage是用来加载item类实例到当前页面window.location=url;
三具体代码如下
<html>
<head>
<title>二级关联菜单制作原理篇</title>
<script language="javascript">
<!--Begin
//建立类别对角和项目对角Type(name)和Item(name, url);
//建立对象便是建立对象属性.与函数(引用)
function Type(name){
this.name=name;
this.length=0;
}
function Item(name, url){
this.name=name;
this.url=url;
}
//建立对角和项目创建方法newType(name),newItem(name, url)
var types=new Array(); //用来存放具体对象,是一个二维数组
var typeIndex=-1; //用来跟踪类型.赋值为负1是清除默认时选项.
var itemIndex=-1; //用来跟踪项目
function newType(name){
typeIndex++; //每建立一个类别,数组索引下标值加一
itemIndex=-1;
types[typeIndex]=new Type(name); //把新建类别对象保存到数组types[typeIndex]中
}
function newItem(name, url){
itemIndex++;
types[typeIndex][itemIndex]=new Item(name, url);
types[typeIndex].length++; //一个完整Type建立完全(包括与它相对应用所有每一个item类)
}
//把类别Type(name)和项目列表Item(name, url)
function relateObj(type){
if(type>0){ //决断对象是否存在,即是否实例化.更直观地说:判断docmunet.forms[0].elements[0] n>0
typeIndex=type-1; //用来清除默认时选项
var itemMenu=document.forms[0].elements[1];
//清除项目列表中旧列表
for(var i=itemMenu.options.length; i>1; i--){
itemMenu.options=null;
}
//增加新类别项目列表到列表中
for(var i=0; i<types[typeIndex].length; i++){
itemMenu.options[i+1]=new Option(types[typeIndex].name);
}
itemMenu.options[0].selected=true; //默认选项
}
itemIndex=0;
}
//加载url
function gotoPage(item){
if(item>0)
url=types[typeIndex][item-1].url;
if(url!=null)
window.location=url; //加载url到当前页面
}
//用构建方法newType(name),newItem(name,url)建立具体对象Type(name)和Item(name, url)
newType("javaAndEJB");
newItem("赛迪技术网", "http://tech.ccidnet.com/pub/dimension/d732.html");
newItem("灰狐技术在线","http://www.huihoo.com/index.html");
newItem("发赛特技术网", "http://www.fawcette.com/China/default.aspx");
newItem("ZDNet中国技术","http://www.zdnet.com.cn/developer");
newItem("java道:解决之道","http://www.jdon.com/");
newItem("java研究组织","ttp://www.javaresearch.org/");
newItem("中国软件","http://www.csdn.net/");
newItem("matrix与java共舞","http://www.matrix.org.cn/website.asp");
newType("开源项目");
newItem("共创联盟","ttp://cosoft.org.cn/html/");
newItem("同济联盟","http://gro.clinux.org/");
newType("JSPAndServlet");
newItem("中国jsp技术网","http://cnjsp.org/");
newItem("asp&jsp技术之窗","http://http://www.51jsp.net/");
newItem("动态网站制作指南","http://www.dnsasp.com/");
newItem("银河技术在线","http://www.ouryh.net");
newType("XMLAndJS...");
newItem("暂无存储记录","#");
//End-->
</script>
</head>
<body>
<script language="javascript">
<!--Begin
document.write("<form >");
document.write("<select ");
document.write("onChange='relateObj(this.selectedIndex);'>");
document.write("<option>"+"选择资源网站类型"+"</option>");
for(var i=0; i<types.length; i++){
document.write("<option>"+types.name+"</option>");
}
document.write("</select>");
document.write("<select ");
document.write("onChange='gotoPage(this.selectedIndex);'>");
document.write("<option>"+"选择将要载入网站"+"</option>");
for(var i=0; i<16; i++){
document.write("<option></option>");
}
document.write("</select></form>");
//-->
</script>
</body>
</html>
----------------------------------------------------
C。三级关联菜单(巩固篇)
<html>
<head>
<title>三级关联菜单</title>
<script language="javascript">
<!--Begin
//建立对象ParentType(name),ChildType(name),Item(name,url)
function ParentType(name){
this.name=name;
this.length=0;
}
function ChildType(name){
this.name=name;
this.length=0;
}
function Item(name, url){
this.name=name;
this.url=url;
}
//跟踪父类别，子类别，和项目列表并保存它们到三维数组type中
var parentIndex=-1;
var childIndex=-1;
var itemIndex=-1;
var type=new Array();
//构建父类别
function newParentType(name){
parentIndex++;
childIndex=-1;
itemIndex=-1;
type[parentIndex]=new ParentType(name);
}
//构建子类别
function newChildType(name){
childIndex++;
itemIndex=-1;
type[parentIndex][childIndex]=new ChildType(name);
type[parentIndex].length++;
}
//构建选项列表
function newItem(name, url){
itemIndex++;
type[parentIndex][childIndex][itemIndex]=new Item(name, url);
type[parentIndex][childIndex].length++;
}
//关联父类别与子类别
function relateObj(parentType){
if(parentType>0){
parentIndex=parentType-1;
var childTypeMenu=document.forms[0].elements[1];
var itemMenu=document.forms[0].elements[2];
for(var i=childTypeMenu.options.length; i>1; i--)
childTypeMenu.options=null;
//for(var i=itemMenu.options.length; i>1; i--)
//itemMenu.options=null;
for(var i=0; i<type[parentIndex].length; i++)
childTypeMenu.options[i+1]=new Option(type[parentIndex].name);
childTypeMenu.options[0].selected=true;
}
childIndex=0;
}
//关联子类别与选项列表
function relateItem(childType){
if(childType>0){
childIndex=childType-1;
//var childTypeMenu=document.forms[0].elements[1];
var itemMenu=document.forms[0].elements[2];
//for(var i=childTypeMenu.options.length; i>1; i--)
//childTypeMenu.options=null;
for(var i=itemMenu.options.length; i>1; i--)
itemMenu.options=null;
for(var i=0; i<type[parentIndex][childIndex].length; i++)
itemMenu.options[i+1]=new Option(type[parentIndex][childIndex].name);
itemMenu.options[0].selected=true;
}
itemIndex=0;
}
/*
*加载url到当前窗口或框架
function(item){
if(item>0)
var url=type[parentIndex][childIndex][itemIndex].url;
if(url!=null)
window.location=url;
}
*/
//实例化对象
newParentType("父类一"); //父类别一
newChildType("父类一子类1"); //子类别一
newItem("parent1.child1.a","#");
newItem("parent1.child1.b","#");
newItem("parent1.child1.c","#");
newItem("parent1.child1.d","#");
newChildType("父类一子类2"); //子类别二
newItem("parent1.child2.a","#");
newItem("parent1.child2.b","#");
newItem("parent1.child2.c","#");
newItem("parent1.child2.d","#");
newParentType("父类二"); //父对象二
newChildType("p父类二子类1"); //子对象一
newItem("parent2.child1.a","#");
newItem("parent2.child1.b","#");
newItem("parent2.child1.c","#");
newItem("parent2.child1.d","#");
newItem("parent2.child1.e","#");
newChildType("p父类二子类2"); //子对象二
newItem("parent2.child2.a","#");
newItem("parent2.child2.f","#");
newItem("parent2.child2.b","#");
newItem("parent2.child2.c","#");
newItem("parent2.child2.d","#");
newItem("parent2.child2.e","#");
newChildType("p父类二子类3");
newItem("暂无记录","#");
//end -->
</script>
</head>
<body>
<script language="javascript">
<!--Begin
document.write("<form >");
document.write("<select ");
document.write("onChange='relateObj(this.selectedIndex);'>");
document.write("<option>"+"父类别选项"+"</option>");
for(var i=0; i<type.length; i++){
document.write("<option>"+type.name+"</option>");
}
document.write("</select>");
document.write("<select ");
document.write("onChange='relateItem(this.selectedIndex);'>");
document.write("<option>"+"子类别选项"+"</option>");
for(var i=0; i<type[parentIndex].length; i++){
document.write("<option>"+type[parentIndex].name+"</option>");
}
document.write("</select>");
document.write("<select >");
document.write("<option >"+"选项项目列表"+"</option>");
for(var i=0; i<20; i++){
document.write("<option></option>");
}
document.write("</select></form>");
</script>
</body>
</html>
- JavaScript跳转菜单(一级，二级，三级)
- Javascript 城市联动选择，支持一级，二级，三级联动
- 一级、二级、三级封锁协议
- 一级二级菜单slideToggle
- 动态建立右键菜单(一级/二级/三级) 响应鼠标单击事件及修改项的内容
- treeView添加一级二级三级节点。
- 一级二级三级缓存谁比较重要？？？
- cpu－一级二级三级缓存
- cpu－一级二级三级缓存
- CPU之CPU一级\二级\三级缓存
- 一级横菜单二级坚菜单
- 一级菜单hover进入二级菜单，二级菜单不消失
- 二级联动菜单 三级联动菜单
- 二级菜单和三级菜单得实现
- javascript三级下拉菜单
- javascript 菜单三级联动
- JavaScript 三级级联菜单
- CSS二级菜单+Javascript
- Java编程中更新XML文档的常用方法
- 十面埋伏剧情版
- 破除java神话（一） 垃圾收集解决所有的内存问题
- 批处理JDBC语句以提高处理速度
- Oracle数据库几种关闭方式
- JavaScript跳转菜单(一级，二级，三级)
- 上班一族“黑话”辞典大曝光
- 今天终于有了一个结果！！
- 现成汉字字符串的模糊查找函数
- 中国报纸今年"十大流行语"发布:虐俘和审计风暴
- JAVA学习笔记之JIRA
- WebServices 效率之贴士
- 第三次迭代结束
- 1000的阶乘的处理
