js选择并转移导航菜单示例代码,javascript实现跳
分类:美高梅游戏官网网站

实现html界面

js选择并转移导航菜单示例代码,js导航菜单示例代码

实现html界面

<!DOCTYPE html>
<html>
<head>
<title>Select and Go Navigation</title>
<script src="script01.js"></script>
<link rel="stylesheet" href="script01.css" rel="external nofollow" >
</head>
<body>
<form action="gotoLocation.cgi" class="centered">
<select id="newLocation">
<option selected>Select a topic</option>
<option value="script06.html">Cross-checking fields</option>
<option value="script07.html">Working with radio buttons</option>
<option value="script08.html">Setting one field with another</option>
<option value="script09.html">Validating Zip codes</option>
<option value="script10.html">Validating email addresses</option>
</select>
<noscript>
<input type="submit" value="Go There!">
</noscript>
</form>
</body>
</html>

实现菜单导航

window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById ("newLocation");
var newPage = newLoc.options [newLoc.selectedIndex].value;
if (newPage != "") {
window.location = newPage;
}
}

下面是源码分析
1.

window.onload = initForm;
window.onunload = function() {};
在窗口加载时,调用initForm()函数。下一行需要解释一下,因为它是处理某些浏览器的古怪行为的变通方法。

当窗口卸载时(即关闭窗口或者浏览器转到另一个网址),我们调用一个匿名函数(anonymousfunction),即没有名称的函数。在这个示例中,这个函数不但没有名称,而且根本不做任何事情。提供这个函数是因为必须将onunload设置为某种东西,否则,当单击浏览器的back按钮时,就不会触发onload事件,因为在某些浏览器(比如Firefox和Safari)中页面会被缓存。让onunload执行任何操作,就会使页面不被缓存,因此当用户后退时,会发生onload事件。

匿名是指在function和()之间没有名称。这是触发onunload但不让它做任何事情的最简单的方法。与任何函数中一样,花括号包含函数的内容。这里的花括号是空的,因为这个函数不做任何事情。

2.

document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
在initForm()函数中,第一行获得HTML页面上的菜单(它的id为newLocation),并且将它的selectedIndex属性设置为零,这会使它显示Select a topic。
第二行让脚本在菜单选择发生改变时,调用jumpPage()函数。

3.

var newLoc = document.getElementById("newLocation");
在jumpPage()函数中,newLoc变量查找访问者在菜单中选择的值。

4.

var newPage = newLoc.options[newLoc.selectedIndex].value;
从方括号中的代码开始,向外依次分析。newLoc.selectedIndex是一个从0~5的数字(因为有6
个菜单选项。记住JavaScript的编号常常是基于零的)。得到这个数字之后,接下来获得对应的菜单项
的值,这就是我们希望跳转到的网页的名称。然后,将结果赋值给变量newPage。

5.

if (newPage != "") {
window.location = newPage;
这个条件语句首先检查newPage是否非空。换句话说,如果newPage有一个值,那么让窗口转到
选择的菜单项所指定的URL。

传统
图片 1

<!DOCTYPE html>
<html>
<head>
<title>Select and Go Navigation</title>
<script src="script01.js"></script>
<link rel="stylesheet" href="script01.css" rel="external nofollow" >
</head>
<body>
<form action="gotoLocation.cgi" class="centered">
<select id="newLocation">
<option selected>Select a topic</option>
<option value="script06.html">Cross-checking fields</option>
<option value="script07.html">Working with radio buttons</option>
<option value="script08.html">Setting one field with another</option>
<option value="script09.html">Validating Zip codes</option>
<option value="script10.html">Validating email addresses</option>
</select>
<noscript>
<input type="submit" value="Go There!">
</noscript>
</form>
</body>
</html>

js 导航菜单代码,

tabCon = $_class("sub_zzjs").getElementsByTagName("ul");
所以,tabCon是ul元素的一个集合。
tabCon[o]是集合中的第o个元素。  

这里要做的是,省略Go There按钮,选择菜单项后,直接跳转。

实现菜单导航

急需导航二级菜单的js源代码?

这里有一个js的多级联动下拉菜单
可以自定义位置和样式 比较实用
里面有教程和源码
参考资料:www.blueidea.com/...=11931  

实现html界面 !DOCTYPE htmlhtmlheadtitleSelect and Go Navigation/titlescript src="script01.js"/scriptlink...

 图片 2

window.onload = initForm;
window.onunload = function() {};
function initForm() {
document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
}
function jumpPage() {
var newLoc = document.getElementById ("newLocation");
var newPage = newLoc.options [newLoc.selectedIndex].value;
if (newPage != "") {
window.location = newPage;
}
}

 

下面是源码分析
1.

Html代码

window.onload = initForm;
window.onunload = function() {};
在窗口加载时,调用initForm()函数。下一行需要解释一下,因为它是处理某些浏览器的古怪行为的变通方法。

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "; 
<html xmlns="; 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>转移菜单</title> 
<script type="text/javascript" src="转移菜单.js"></script> 
</head> 
<body> 
<form> 
  <select id="newLocation"> 
    <option selected="selected" value="">Select a topic</option> 
    <option value="topic1.html">topic1</option> 
    <option value="topic2.html">topic2</option> 
    <option value="topic3.html">topic3</option> 
    <option value="topic4.html">topic4</option> 
    <option value="topic5.html">topic5</option> 
  </select> 
   
  <!--当浏览器不支持javascript或者禁用脚本运行时被调用--> 
 <noscript> 
    <input type="submit" value="Go There!"/> 
 </noscript> 
  
</form> 
 
</body> 
</html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>转移菜单</title>
<script type="text/javascript" src="转移菜单.js"></script>
</head>
<body>
<form>
  <select id="newLocation">
   <option selected="selected" value="">Select a topic</option>
    <option value="topic1.html">topic1</option>
    <option value="topic2.html">topic2</option>
    <option value="topic3.html">topic3</option>
    <option value="topic4.html">topic4</option>
    <option value="topic5.html">topic5</option>
  </select>
 
  <!--当浏览器不支持javascript或者禁用脚本运行时被调用-->
 <noscript>
  <input type="submit" value="Go There!"/>
 </noscript>
 
</form>

当窗口卸载时(即关闭窗口或者浏览器转到另一个网址),我们调用一个匿名函数(anonymousfunction),即没有名称的函数。在这个示例中,这个函数不但没有名称,而且根本不做任何事情。提供这个函数是因为必须将onunload设置为某种东西,否则,当单击浏览器的back按钮时,就不会触发onload事件,因为在某些浏览器(比如Firefox和Safari)中页面会被缓存。让onunload执行任何操作,就会使页面不被缓存,因此当用户后退时,会发生onload事件。

</body>
</html>

匿名是指在function和()之间没有名称。这是触发onunload但不让它做任何事情的最简单的方法。与任何函数中一样,花括号包含函数的内容。这里的花括号是空的,因为这个函数不做任何事情。

 

2.

Javascript脚本[javascript]
window.onload=initForm; 
 
//防止页面缓存,无法触发onload  
window.onunload=function(){} 
     
    function initForm(){ 
        document.getElementById("newLocation").selectIndex=0; 
        document.getElementById("newLocation").onchange=jumpPage; 
         
        } 
         
         
    function jumpPage(){ 
        var newLoc=document.getElementById("newLocation"); 
        var newPage=newLoc.options[newLoc.selectedIndex].value; 
     
        if (newPage!=""){ 
            window.location=newPage; 
            } 
         
        } 
window.onload=initForm;

document.getElementById("newLocation").selectedIndex = 0;
document.getElementById("newLocation").onchange = jumpPage;
在initForm()函数中,第一行获得HTML页面上的菜单(它的id为newLocation),并且将它的selectedIndex属性设置为零,这会使它显示Select a topic。
第二行让脚本在菜单选择发生改变时,调用jumpPage()函数。

//防止页面缓存,无法触发onload
window.onunload=function(){}
 
 function initForm(){
  document.getElementById("newLocation").selectIndex=0;
  document.getElementById("newLocation").onchange=jumpPage;
  
  }
  
  
 function jumpPage(){
  var newLoc=document.getElementById("newLocation");
  var newPage=newLoc.options[newLoc.selectedIndex].value;
 
  if (newPage!=""){
   window.location=newPage;
   }
  
  }

3.

摘自 贾琳的专栏  

var newLoc = document.getElementById("newLocation");
在jumpPage()函数中,newLoc变量查找访问者在菜单中选择的值。

这里要做的是,省略Go There按钮,选择菜单项后,直接跳转。 Html代码 [html] !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN ...

4.

var newPage = newLoc.options[newLoc.selectedIndex].value;
从方括号中的代码开始,向外依次分析。newLoc.selectedIndex是一个从0~5的数字(因为有6
个菜单选项。记住JavaScript的编号常常是基于零的)。得到这个数字之后,接下来获得对应的菜单项
的值,这就是我们希望跳转到的网页的名称。然后,将结果赋值给变量newPage。

5.

if (newPage != "") {
window.location = newPage;
这个条件语句首先检查newPage是否非空。换句话说,如果newPage有一个值,那么让窗口转到
选择的菜单项所指定的URL。

您可能感兴趣的文章:

  • js实现兼容性好的微软官网导航下拉菜单效果
  • js实现改进的仿蓝色论坛导航菜单效果代码
  • js实现仿爱微网两级导航菜单效果代码
  • js实现横向伸展开的二级导航菜单代码
  • js实现的黑背景灰色二级导航菜单效果代码
  • js实现带圆角的两级导航菜单效果代码
  • js实现多选项切换导航菜单的方法
  • 一个js控制的导航菜单实例代码
  • 原生js做的手风琴效果的导航菜单
  • JS实现自动变化的导航菜单效果代码

本文由美高梅网址发布于美高梅游戏官网网站,转载请注明出处:js选择并转移导航菜单示例代码,javascript实现跳

上一篇:学习javascript面向对象,构造函数模式 下一篇:没有了
猜你喜欢
热门排行
精彩图文