当前位置:编程学习 > JAVA >>

javascript实现跳转菜单

传统
\

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

 \

 

Html代码


[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

 


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;

//防止页面缓存,无法触发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;
   }
  
  }

摘自 贾琳的专栏
 

补充:web前端 , JavaScript ,
CopyRight © 2022 站长资源库 编程知识问答 zzzyk.com All Rights Reserved
部分文章来自网络,