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.二级跳转菜单(原理篇)
一阅读群:有一定编程基础,有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>

微信小程序的一级页面和二级页面设置

微信小程序的一级页面和二级页面设置
  • kerryqpw
  • kerryqpw
  • 2017-10-18 13:12:55
  • 902

安卓HTML中打开一个连接!点击跳转了,可以实现返回上一级的HTML的页面!

安卓HTML中打开一个连接!点击跳转了,可以实现返回上一级的HTML的页面!一般都要监听手机的返回按钮和页面上的返回按钮 //监听手机的返回按钮 @Override public boolean on...
  • qq_32519693
  • qq_32519693
  • 2017-06-15 11:14:59
  • 1805

三级联动跳转菜单 优化过的

  • 2009年11月19日 11:19
  • 5KB
  • 下载

android ExpandableListView三级菜单的使用

由于本人所作的项目需要用到这种列表式的收缩与展开,因此,就好好研究了有关这方面的一些知识,当然,也借鉴了网上一些成功的案列。下面就是我模拟测试的一个展示界面。实现上面的这些功能,我主要是通过Expan...
  • huangf321123
  • huangf321123
  • 2016-07-19 10:14:08
  • 2816

跳转菜单打开新页面

把开始的 onChange="MM_jumpMenu(parent,this,0)" 改成 onchange="window.open(this.options[this.selectedIndex...
  • mastermanager
  • mastermanager
  • 2008-01-28 16:08:00
  • 299

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

     A一级跳转菜单 一面向对象方法  对象跳转菜单//建立对象function Page(name, url){  this.name=name;  this.url=url;}//跟踪且保存对...
  • lwqJ
  • lwqJ
  • 2004-07-20 19:04:00
  • 4063

可<em>跳转</em>回首页的CSS二级联动<em>菜单</em>

举报人: 被举报人: sd7087001 举报的资源分: 3 *类型: *详细原因: 取  消 提  交 可<em>跳转</em>回首页的CSS二级联动<em>菜单</em> 3积分 立即下载 ...
  • 2018年04月13日 00:00

JS巧妙实现多级菜单中当前菜单不随页面跳转样式而发生变化

一.概述         本文介绍了JQuery巧妙实现多级菜单中当前菜单不随页面跳转样式发生变化,貌似没看懂啥意思? 看图说话:就是点二级或多级菜单时,父级展开,当前菜单是被选中状态,这下明...
  • leesin2011
  • leesin2011
  • 2017-05-29 00:36:14
  • 2740

三种方式实现网页二级菜单

方法一:使用HTML和CSS实现 首先是Html代码,习惯上会将菜单放在一个div里,使用盒子模型,方便以后的操作和设置样式。 二级菜单也就是在一级菜单中的li中再添加一个ul-li结构 ...
  • Bazingaea
  • Bazingaea
  • 2016-11-28 21:18:52
  • 20591
收藏助手
不良信息举报
您举报文章:JavaScript跳转菜单(一级,二级,三级)
举报原因:
原因补充:

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