JavaScript跳转菜单(一级,二级,三级)

原创 2004年07月20日 19:04:00

     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.二级跳转菜单(原理篇)
一阅读群:有一定de.gif编程基础,有js基础。
二。。建立二级关联菜单。主要由二个自定义对象组成。即Type(name)和Item(name, url)类组成。由方法relateObj(type)把这二个类进行关联。由二维数组types进行存储数据。方法gotoPage是用来加载item类实例到当前页面de.gifwindow.location=url;

三具体代码如下
<html>
<head>
  <title>二级关联菜单制作原理篇</title>

<script language="javascript">
<!--Begin
//建立类别对角和项目对角Type(name)和Item(name, url);
//建立对象便是建立对象de.gif属性.与函数(引用)
function Type(name){
  this.name=name;
  this.length=0;
}
function Item(name, url){
  this.name=name;
  this.url=url;
}
//建立对角和项目de.gif创建方法newType(name),newItem(name, url)

var types=new Array(); //用来存放具体对象,是一个二维数组
var typeIndex=-1;  //用来跟踪类型.赋值为负1是清除默认时de.gif选项.
var itemIndex=-1;  //用来跟踪项目

function newType(name){
  typeIndex++;  //每建立一个类别,数组索引下标值加一
  itemIndex=-1;
  types[typeIndex]=new Type(name); //把新建de.gif类别对象保存到数组types[typeIndex]中
}
function newItem(name, url){
  itemIndex++;
  types[typeIndex][itemIndex]=new Item(name, url);
  types[typeIndex].length++;  //一个完整de.gifType建立完全(包括与它相对应用de.gif所有de.gif每一个item类)
}
//把类别Type(name)和项目列表Item(name, url)
function relateObj(type){
  if(type>0){   //决断对象是否存在,即是否实例化.更直观地说:判断docmunet.forms[0].elements[0] n>0
    typeIndex=type-1; //用来清除默认时de.gif选项
var itemMenu=document.forms[0].elements[1];

//清除项目列表中de.gif旧列表
for(var i=itemMenu.options.length; i>1; i--){
   itemMenu.options=null;
}
//增加新类别de.gif项目列表到列表中
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)建立具体de.gif对象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>"+"选择将要载入de.gif网站"+"</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>

语言基础模块-三级菜单作业

作业要求: 三级菜单: 1. 运行程序输出第一级菜单 2. 选择一级菜单某项,输出二级菜单,同理输出三级菜单 3. 返回上一级菜单和顶部菜单 4. 菜单数据保存在文件中 此程序功能...
  • dragonyangang
  • dragonyangang
  • 2017年06月03日 13:49
  • 496

jQuery中,选中一级菜单,二级菜单自动出现的js代码

其实这个不难。 账号管理 账号注册 ...
  • chaplinlong
  • chaplinlong
  • 2016年04月28日 17:31
  • 1048

html和css实现一级菜单和二级菜单学习笔记

实现一级菜单二级菜单:
  • wj903829182
  • wj903829182
  • 2014年08月21日 19:51
  • 5885

JQuery做折叠二级菜单

今天用JQuery做了一个折叠的二级菜单,以前直接用的Bootstrap插件来做,Boostrap直接封装好了,拿过来用,这次是自己手写,一边借鉴网上的优秀资源,一边自己做的。自我感觉界面交互良好。原...
  • u010622874
  • u010622874
  • 2016年05月30日 17:43
  • 816

WPS中设置一级、二级、三级标题以及正文和目录

1988年5月,一个叫求伯君的普通技术人员在一个宾馆的出租房间里凭借一台386电脑写出了WPS(Word Processing System)1.0,从此开创了中文字处理时代。   WPS比Micr...
  • sanqima
  • sanqima
  • 2016年01月17日 18:13
  • 31156

最简单的纯js实现点击展开二级菜单功能

虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做...
  • well2049
  • well2049
  • 2017年05月16日 08:39
  • 883

在菜单Setting加入子菜单

模仿Settings其他菜单项加入子菜单
  • kv110
  • kv110
  • 2014年09月27日 19:01
  • 4606

一级指针二级指针详解

void change_val(char *p)  {      char new_val[3] = {2, 3, 4};    // [2]      p = new_val;    //[3] ...
  • tricerice
  • tricerice
  • 2015年08月08日 23:12
  • 2461

cpu-一级二级三级缓存

首先简单了解一下一级缓存。目前所有主流处理器大都具有一级缓存和二级缓存,少数高端处理器还集成了三级缓存。其中,一级缓存可分为一级指令缓存和一级数据缓存。一级指令缓存用于暂时存储并向CPU递送各类运算指...
  • u012512762
  • u012512762
  • 2014年12月02日 16:27
  • 592

bootstrap导航条的二级菜单下实现三级菜单

bootstrap在导航条中的二级菜单下实现三级菜单直接上代码 ...
  • s740556472
  • s740556472
  • 2017年01月20日 17:50
  • 8389
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript跳转菜单(一级,二级,三级)
举报原因:
原因补充:

(最多只允许输入30个字)