`
hain
  • 浏览: 455528 次
  • 来自: ...
社区版块
存档分类
最新评论

如何给按钮加上链接功能

阅读更多
解决思路
按钮属于控件级的对象,优先级比较高,所以不能象图片或文本一样直接加链接,只能通过按钮的单击事件调用脚本的方式来实现。
具体步骤
    1.在原窗口打开链接

    <input type="button" 
value="闪吧" onClick="location=’http://www.flash8.net’">
    <button onClick="location.href=’http://www.flash8.net’">闪吧</button>
    <form action="http://www.flash8.net"><input type="submit" value="打开链接"></form>

    2.在新窗口中打开链接

    <input type="button" 
value="闪吧" onClick="window.open(’http://www.flash8.net’)">
    <button onClick="window.open(’http://www.flash8.net’)">闪吧</button>
    <form action="http://www.flash8.net" 
target="_blank"><input type="submit" value="打开链接"></form>

注意:onClick调用的代码里的引号在只有一重时可以单双嵌套,超过两重就必须用"\"号转义且转义的引号必须跟里层的引号一致,如:

<button onClick="this.innerHTML=’<font color=\’red\’>http://www.flash8.net</font>’">闪吧</button>



<button onClick=’this.innerHTML="<font color=\"red\">http://www.flash8.net</font>"’>闪吧</button>

而下面都是错误的写法:

<button onClick="this.innerHTML=’<font color=’red’>http://www.flash8.net</font>’">闪吧</button>

<button onClick="this.innerHTML=’<font color="red">http://www.flash8.net</font>’">闪吧</button>

<button onClick="this.innerHTML=’<font color=\"red\">http://www.flash8.net</font>’">闪吧</button>

 提示:大部分属于window或document对象的方法和属性都可以省略前缀window或document,比如说本例中的location.href(location.href又可以简写为location,因为location的默认对象为href)就是window.location.href或document.location.href的省略式写法。
技巧:本例中还可以用下面的方法来代替location.href
location.replace(url)
location.assign(url)
navigate(url)
特别提示
第一步中的代码运行后,单击按钮将跳转到链接目标。而第二步的在单击按钮后将在新窗口中打开链接。

特别说明


本例主要是通过用onClick捕获用户在按钮上的单击事件,然后调用location对象的href方法或window对象的open方法来打开链接。另外一个技巧是通过提交表单来实现链接功能,按钮必须是type=submit类型的按钮,表单的action值就是链接目标,target值就是链接打开的目标方式。
分享到:
评论

相关推荐

    按钮链接说明&nbsp;

    标题中的“按钮链接说明”指的是在用户界面设计中,如何为按钮添加链接并提供相应的说明或提示信息。这种功能在网页、应用程序和其他交互式界面中非常常见,它可以帮助用户更好地理解按钮的功能,从而提高用户体验。...

    通过DLL给程序加一个按钮

    在Windows编程中,DLL(动态链接库)是一种强大的工具,可以为已编译的应用程序添加新的功能或扩展其现有功能,即使我们没有源代码。本文将深入探讨如何通过DLL技术来给程序添加一个新的按钮,以及涉及到的子类化...

    给flash添加链接

    然而,许多初学者在尝试给Flash按钮添加链接时常常遇到问题,主要是由于对绝对路径和相对路径的理解不足。本篇将详细介绍两种为Flash按钮添加链接的方法。 方法一,通过Flash软件操作: 1. 首先,打开Flash源文件...

    如何在TIA博途WINCC画面中给按钮开关或IO域等增加用户密码权限功能?.docx

    在TIA博途WINCC系统中,为了实现对按钮开关、IO域等对象的操作权限控制,我们可以设置用户密码权限功能,以确保不同级别的用户能够执行不同的操作或进行特定的监控任务。以下是一份详细的步骤指南,帮助您了解如何在...

    百度编辑器里添加按钮

    这篇博文(链接已提供)可能详细介绍了如何在百度编辑器中添加一个用于处理PDF文件的按钮,这对于需要集成PDF操作的项目来说非常有用。 首先,我们需要理解百度编辑器,它是一个开源的富文本编辑器,提供了多种文本...

    JS点击复制剪贴板鼠标点击文字弹出复制链接按钮

    在前端开发中,实现"JS点击复制剪贴板鼠标点击文字弹出复制链接按钮"的功能是一种常见的需求,尤其是在网页交互和用户体验优化上。...在实际项目中,还可以根据需求扩展功能,比如添加链接预览、分享到社交媒体等。

    VC实现标题栏添加按钮

    标题栏添加按钮是Windows应用程序中一种常见的自定义界面设计,主要目的是增强用户交互性或提供额外的功能选项。在Microsoft Visual C++(VC)环境中,我们可以使用MFC(Microsoft Foundation Classes)库来实现这一...

    CSS3实现鼠标悬停链接按钮代码.zip

    总结来说,"CSS3实现鼠标悬停链接按钮代码"是一种利用CSS3的新特性来创建动态交互按钮的技术,通过`:hover`伪类和过渡效果实现鼠标悬停时的视觉变化,同时可能结合JavaScript来增强功能。这样的代码对于提升用户体验...

    不用SUBMIT可以实现的多个按钮的功能

    2. **JavaScript 事件处理**:在HTML中,我们给每个按钮添加了`onclick`事件监听器,这将调用对应的JavaScript函数。这些函数可以定义在页面的`&lt;script&gt;`标签内,或者链接到外部JS文件。 ```javascript function ...

    按钮和链接的相互模拟实现

    在网页设计与开发过程中,有时我们需要让按钮看起来像链接,或者让链接具备按钮的功能。这种交互方式能够为用户提供更加灵活且直观的操作体验,同时也为开发者提供了更多的创意空间。下面将详细介绍几种实现按钮和...

    多选按钮和监听按钮

    在IT行业中,用户界面设计是至关重要的一环,而多选按钮(Checkbox)和监听按钮(通常指的是具有事件监听功能的按钮)是常见的交互元素。在本篇内容中,我们将深入探讨这两个组件,以及如何在实际项目中应用它们。...

    QT在QTableView的一列里添加两个按钮

    QT框架是Qt公司开发的一种跨平台的C++图形用户界面...通过以上这些步骤,我们可以在QT的QTableView中实现一列内添加两个按钮的功能,提供更丰富的用户界面和交互体验。理解并掌握这些知识点对于QT应用的开发至关重要。

    AmazeUI 按钮

    在网页设计中,按钮作为用户与页面交互的关键元素,AmazeUI 提供了一系列美观且功能丰富的按钮样式和选项,以满足各种设计需求。 这篇博文(链接:https://onestopweb.iteye.com/blog/2276594)可能详细介绍了如何...

    JS给按钮添加跳转功能类似a标签

    给按钮添加跳转功能【类似a标签】 window.onload = function() { document.getElementById('myButton').onclick = function() { location = 'https://www.baidu.com/'; }; }; 百度一下,你就知道" /&gt; ...

    如何在标题栏上添加按钮(添加除了最小化放大关闭按钮以外的自定义按钮).zip

    标题栏上的自定义按钮添加是软件界面个性化和增强功能的一种常见方法。这通常涉及到操作系统级别的窗口处理或使用特定的库和API。以下是一些关于如何在标题栏上添加除最小化、最大化和关闭按钮以外的自定义按钮的...

    javascript经典特效---用按钮作为链接.rar

    总的来说,"用按钮作为链接"是JavaScript在网页交互中的一种创新应用,它结合了按钮的交互性和链接的导航功能,使得前端开发更加灵活多样。在实际项目中,这种技术可以根据具体需求进行扩展和优化,实现更复杂的功能...

    在ie上添加按钮

    标题“在ie上添加按钮”涉及的是Web开发中的一个特定话题,即如何在Internet Explorer(IE)浏览器上自定义或扩展界面,通过添加额外的按钮来实现特定功能。这通常涉及到浏览器扩展或插件的开发,它允许用户根据自己...

    JavaScript的各种页面,表格,窗口,按钮,链接等特效

    本教程将探讨JavaScript在实现页面、表格、窗口、按钮和链接等元素的各种特效方面的应用。 1. 页面特效: - 滚动条:JavaScript可以控制页面滚动,如创建平滑滚动效果,或者自定义滚动条样式。 - 动态加载:通过...

    图片加播放按钮(含切换图片播放按钮)

    描述中提到的“NULL 博文链接:https://yuxuguang.iteye.com/blog/616904”,虽然没有具体的描述文字,但给出了一个博客链接,这个链接可能指向了一篇详细的教程或示例代码,用于解释如何实现这一功能。在实际操作中...

    标题栏添加命令按钮源码

    在VB中,由于标准的控件库不直接支持在标题栏添加按钮,我们需要使用Windows API(应用程序接口)来访问操作系统级别的功能。API函数如`FindWindow`、`SetWindowLong`、`GetWindowLong`等用于获取和修改窗口属性,`...

Global site tag (gtag.js) - Google Analytics