HTML学习--把Button变成a标签一样,带链接

最新推荐文章于 2021-06-03 12:29:40 发布
原创 最新推荐文章于 2021-06-03 12:29:40 发布 · 6k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #a标签 #带链接

本文探讨在HTML网页开发中，如何解决使用button标签替代a标签导致的失效问题，通过实例演示在Firefox中有效，在IE中失效的情况，并提供了解决方案：在button标签中使用onClick属性实现跳转功能。

在做HTML网页的时候遇到的问题,在页面上不使用a标签,而是使用button标签.问了一下同事,他们告诉了我这个:
        <a href="目标地址"><input type="button" value="提交"></a>
  上面这种也可以使用button.
我在Firefox中使用了这个,嗯,效果很不错.但是我的网页也需要在IE中测试,发现这按钮竟然失效了.我又从网上问了大神们,找到了这个:
     

  <input type="button" value="提交" onClick="location.href='目标路径'"/>

       其实只使用下面这种就可以了,因为在Firefox中也有效果.O(∩_∩)O！
 

button和a的四种状态
K8sCat
08-14 2万+
css中按钮有四种状态 1. 普通状态 2. hover 鼠标悬停状态 3. active 点击状态 4. focus 取得焦点状态 用focus按钮按下，不弹起 用active按钮按下，会弹起 a:link 超链接的默认样式 a:visited 访问过的（已经看过的）链接样式 a:hover 鼠标处于鼠标悬停状态的链接样式 a:active 当鼠标左键按下时，被激活（就...
通过CSS让button标签实现A标签的效果
software_developer的专栏
11-26 5508
我们公司为了让菜单突出显示，于是我想到了用button来实现，显示的效果如下：当鼠标离开button时：当鼠标在button上时：实现的代码如下：http://www.w3.org/1999/xhtml">无标题文档.btOver{background-image:url();background-position:2px 0;background-repeat:no-re
html按钮可以用a跳转页面,你还在用a标签吗？——用button替代a
weixin_31707171的博客
06-03 1782
前言：a标签，不止你在用，我也在用。但某些时候我们可以考虑用button替代a。在多页应用中，a标签很常见，我们常用来作为一个普通超链接，进行页面跳转。而在单页应用中，我们使用路由进行页面切换，a标签的使用就少了。不过当我们不需要跳转，只需要点击某个元素来达到一些效果的需求时，常常使用a标签。如图，智联招聘上的这些选项，就是a标签，没有使用a标签进行页面的跳转，而是监听点击事件然后进行一些操作，这...
HTML篇之CSS样式：<button></button>按钮变成超链接<a></a>的样式
weixin_30552635的博客
03-12 259
原文：http://blog.youkuaiyun.com/qq_16769857/article/details/52055349 [html]view plaincopy print? <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8...
linkbutton的样式居然可以和<a标签一样用a:hover
风云
04-18 4144
linkbutton的样式可以和一样的调用a:hover样式如：-----------------------------------------------------------------#selectmod a{ color:Green ;    text-decoration :none; }#selectmod a:hover{ color:Red ;  text-decoration
4点击按钮修改a标签的地址和热点文字
dinggu6579的博客
08-28 396
<input type="button" value="点击修改" id="btn4"/> <a href="https://www.baidu.com/" id="a1"></a> <script> //根据id获取按钮,为按钮注册点击事件,添加事件处理函数 var btn4Obj=document.getElementByI...
Button_001:$+$ 按钮创建 - 使用 HTML 和 CSS。 按钮编号 - 001 || 纽扣系列
05-30
如果你想要创建一个链接式按钮，可以使用`<a>`标签，结合`<button>`元素的部分特性。例如： ```html <a href="https://example.com" class="link-button"> <button id="button-001">访问示例网站</button> </a> ``...
demo1.html-------->不做任何点击跳------->demo2.html------->点击a标签------>demo3.html-----> 不做任何点击----->OneServlet----->内部转发----->TwoServlet----重定向>--->demo4.html----->点击button按钮---->跳demo1.html
最新发布
09-29
但是根据要求，TwoServlet会重定向到demo4.html，所以最终浏览器地址会变成demo4.html。 然而，这里有一个问题：OneServlet转发到TwoServlet后，TwoServlet执行重定向，那么整个流程是： - 浏览器请求OneServlet...
html select标签加链接3种方法
09-28
以下将详细介绍标题提到的三种在HTML `<select>` 标签中添加链接的方法： 1. **通过JavaScript事件处理函数**： 在这种方法中，我们为`<select>`标签添加`onchange`事件，当用户选择一个选项时，会调用指定的...
demo1.html---->点击a标签----->demo2.html---按钮跳转--->OneServlet--->内部转发--->TwoServlet--->重定向-->demo3.html
09-29
1. **demo1.html**：简单的HTML页面，有一个a标签链接到demo2.html。 2. **demo2.html**：HTML页面，有一个表单按钮，提交到OneServlet。 3. **OneServlet**：Java Servlet，处理请求后，内部转发到TwoServlet。 4. ...
a标签置灰不可点击的实现方法
08-31
通过在`<a>`标签的`onclick`事件中返回`false`，可以阻止链接的默认行为。例如： ```html <a onclick="return false;" href="http://example.com"> 点击我，但不会跳转 </a> ``` 这样设置后，即使用户点击了...
再谈QT模拟点击<a>标签
li235456789的专栏
12-29 1479
最近公司要求做一个信息搜集工具，在百度地图输入学校名称， 然后把左侧列出的所有学校的名称， 电话， 地址， 保存在一个excel文件里面。如果只有几条数据就能不用点击下一页， 而当搜过列出成千上万条数据时，就需要一页一页地点， 然后，返回每一页的网页数据文本， 通过正则表达式和字符串分割，把对应的学校名称，电话，地址再保存在execel里面。    当有成千上万数据时 ，人工去点，将是一个很大的数
Html超级链(A标签)实现按钮效果的五种方法（综合实例）
【敦厚的曹操】的专栏
06-08 5368
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <tit.
button和a标签实现点击返回上一个网页
yumon321的博客
10-11 4263
1、&lt;input onclick="history.go(-1)" type="button" value="返回"&gt; 2、&lt;a href="JavaScript:history.back(-1)"&gt;返回&lt;/a&gt;   转载自：镜站网》button和a标签实现点击返回上一个网页...
button、input和a标签作为按钮时的区别
吴小粥的博客
10-25 7421
我们都知道，button、input、a标签都可以加上一定的样式之后成为外观上没有太大差别的按钮，那么，这三个标签都适合在什么场景下作为按钮使用呢？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值