javascript实现跳转菜单

最新推荐文章于 2022-05-02 09:32:01 发布
最新推荐文章于 2022-05-02 09:32:01 发布
阅读量1.1k 收藏
点赞数
分类专栏： JQuery 文章标签： javascript function 脚本 xhtml html 浏览器
本文介绍了一种简化网页跳转流程的方法，通过HTML和JavaScript实现，省略了传统GoThere按钮，用户只需选择菜单项即可直接跳转到指定页面。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

传统


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


Html代码

[html] view plain copy print ?
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>转移菜单</title>  
  6. <script type="text/javascript" src="转移菜单.js"></script>  
  7. </head>  
  8. <body>  
  9. <form>  
  10.   <select id="newLocation">  
  11.     <option selected="selected" value="">Select a topic</option>  
  12.     <option value="topic1.html">topic1</option>  
  13.     <option value="topic2.html">topic2</option>  
  14.     <option value="topic3.html">topic3</option>  
  15.     <option value="topic4.html">topic4</option>  
  16.     <option value="topic5.html">topic5</option>  
  17.   </select>  
  18.     
  19.   <!--当浏览器不支持javascript或者禁用脚本运行时被调用-->  
  20.  <noscript>  
  21.     <input type="submit" value="Go There!"/>  
  22.  </noscript>  
  23.    
  24. </form>  
  25.   
  26. </body>  
  27. </html>  


Javascript脚本
[javascript] view plain copy print ?
  1. window.onload=initForm;  
  2.   
  3. //防止页面缓存，无法触发onload   
  4. window.onunload=function(){}  
  5.       
  6.     function initForm(){  
  7.         document.getElementById("newLocation").selectIndex=0;  
  8.         document.getElementById("newLocation").onchange=jumpPage;  
  9.           
  10.         }  
  11.           
  12.           
  13.     function jumpPage(){  
  14.         var newLoc=document.getElementById("newLocation");  
  15.         var newPage=newLoc.options[newLoc.selectedIndex].value;  
  16.       
  17.         if (newPage!=""){  
  18.             window.location=newPage;  
  19.             }  
  20.           
  21.         }  

js导航栏A标签锚点跳转
10-16
js左侧导航栏A标签锚点跳转，流动效果。非常值得学习。
用js写一个菜单跳转
KindleYoung的博客
12-09 360
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box {
js 菜单下拉跳转
天阶的专栏
07-11 680
--试题类型--    $v):?>     value=" ">                     其中：onchange="location=this.options[this.selectedIndex].value"非常重要
Js作下拉菜单跳转
永远的船长
04-24 1103
惭愧，刚学会～～ 0)location.href=this.options[this.selectedIndex].value">你要去的网站http://www.jades.cn">中华玉网http://www.sina.com.cn/">新浪  表单输入限制（小结）只能输入汉字：只能输入数字：只能输入英文和数字：
javascript实现跳转菜单的具体方法
10-27
javascript实现跳转菜单的具体方法，是指使用JavaScript脚本语言来控制网页中的菜单项选择后直接跳转到对应的页面。这种方法可以提高用户在不同页面间的转换效率，同时省略了传统的“前往”按钮。具体实现方式，首先...
JavaScript实现通过select标签跳转网页的方法
11-25
本文将深入探讨如何使用JavaScript与HTML的`<select>`标签结合，实现在用户选择不同的选项时跳转到不同的网页。这对于创建动态菜单或者自定义导航链接来说是非常实用的。 一、当前页面直接跳转 在`<select>`标签中...
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
11-29
本文将探讨如何使用JavaScript（配合JQuery库）实现这种效果，特别是在页面跳转后仍然保持菜单选中状态。 一、概述 多级菜单中当前菜单不随页面跳转样式变化的关键在于，无论用户点击哪个子菜单，相应的菜单项及其...
js实现select跳转菜单新窗口效果代码分享(超简单)
10-23
本文档中提及的“js实现select跳转菜单新窗口效果代码分享”即为这类需求的一个应用实例，我们将会详细探讨其背后的JavaScript技术细节。 首先，我们看到文中提到的HTML结构部分： ```html (this.options[this....
js实现页面跳转
guihaijinfen的专栏
12-20 1661
js实现页面跳转常用的有如下方式： window.location.href="x.jsp"; //返回 window.history.back(-1); //只IE支持 window.navigate("x.jsp"); self.location='x.jsp';
js实现底部菜单栏
11-13
利用js实现网页底部的菜单形式！ 页面美观大方，实用性强
获取跳转菜单javascript的方法
cuisidong1997的博客
05-02 193
href=“javascript:void(0)” data=“{“id”:“8a2270b06e5ef019016e5efa6601009c”,“name”:”****评明细",“orgId”:“ORG000000”,“parentId”:“40284e816df26fd4016df273037b0007”,“subSystemId”:“8a80808e67719e4e016772210061001c”,“url”:“/hollyv8/network1/network.jsp”,“level”:“2”,“
HTML中select选择菜单跳转“当前窗口”或“新窗口”
跨省少年的博客
01-28 4305
这个是由select的 onchange事件控制的  跳转窗口 就换个函数就好  新窗口：window.open()  当前窗口：document.location.href= 在网上百度了下  下面的optinon都是带有链接的，但是需求中默认有一个不带链接，写个代码， 方便自己参考： select name="sel" onchange="javascript:window.o
html网页制作跳转菜单到网站,Dreamweaver
weixin_42660494的博客
06-09 1928
Dreamweaver 8怎么给网页制作跳转菜单？网页需要一个跳转菜单，该怎么制作这个跳转菜单呢？下面我们就来看看详细Dreamweaver 8 中如何给网页制作跳转菜单的方法，很简单，需要的朋友可以参考下 ，希望能帮到有需要的朋友。如果能够帮组到你，也请你分享给你其他有需要的小伙伴!1、打开Dreamweaver软件，选择创建新项目中的Html。2、单击菜单栏中的插入——表单——跳转菜单。3、在...
HTML页面跳转的方法与CSS下拉菜单
qq_41651216的博客
10-11 1671
以下例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html文件。 1) html的实现 &lt;head&gt;  &lt;meta http-equiv="refresh" content="10"&gt; &lt;meta http-equiv="refresh" content="5;url=hello.html"&gt;   &lt;/head&am
如何用css+原生js实现常见的导航跳转功能？（代码如下）
weixin_43748930的博客
01-14 2572
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
js input分页跳转
weixin_34397291的博客
07-25 699
当页数比较多的时候我们需要加一个input框来跳转到某一...
通过javascript实现页面跳转
彭世瑜的博客
06-28 1301
django中的实现代码 &amp;amp;lt;script&amp;amp;gt; // 直接跳转 window.location.href=&amp;quot;{{ referer }}&amp;quot;; &amp;amp;lt;/script&amp;amp;gt;
javascript实现网页定时跳转代码
weixin_30629653的博客
03-06 368
setTimeout(function() { window.location.href='你要跳转到的页面的地址';}, 时间以秒为单位); 例如： setTimeout(function() {window.location.href='http://www.bt720p.com';}, 100); 100秒后跳转到www.bt720p.com 转载于:https://www.cnbl...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值