代码之家 › 专栏 › 技术社区 › AskMe

通过HTML中的按钮点击访问URL

html

AskMe · 技术社区 · 5 年前

我写的代码如下:

<button class="btn post-btn">Read More &nbsp;
<a href="https://sway.office.com/iDYEqw?ref=Link"></a> 
<i class="fas fa-arrow-right"></i></button>

然而,当我点击按钮时,它会重定向到网站。但其中的按钮图像和文本越来越大。

我的修改代码:

<a href="https://sway.office.com/iDYEqw?ref=Link" class="btn post-btn">Read More &nbsp;</a> 
                            <i class="fas fa-arrow-right"></i></button>



enter code here

如何纠正这一点?谢谢。

2 回复 | 直到 5 年前

SMAKSS 5 年前

按钮不是这样工作的, 你应该使用 <a> 单独标记或创建 onclick 事件让按钮为您进行重定向,或者您可以将按钮包装在 form 并将表单操作设置为所需的URL .

您还可以将按钮包裹在 <a> 这根本不推荐,因为根据 W3C.org HTML docs 这不是一种标准的方式。类似 question 关于包装 <button> 里面 <a> 在SO。

使用 <a> 标签单独。然后你可以把它设计成一个按钮,让它更有意义。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />

<a href="https://sway.office.com/iDYEqw?ref=Link">Read More &nbsp;<i class="fas fa-arrow-right"></i></a>

使用 <按钮> 具有 onclick 。然后,您可以通过更改重定向到所需的页面 window.location.href 价值。

const button = document.querySelector("button");

button.addEventListener("click", function() {
  window.location.href = "https://sway.office.com/iDYEqw?ref=Link"
})

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />

<button class="btn post-btn">Read More &nbsp;
<i class="fas fa-arrow-right"></i></button>

包裹 <按钮> 里面 形式 。然后将表单操作设置为所需的URL。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />

<form action="https://sway.office.com/iDYEqw?ref=Link" method="GET">
  <button>Read More &nbsp;<i class="fas fa-arrow-right"></i></button>
</form>

cs1349459 5 年前

这是一个简单的解决方案。你只需要把按钮放在里面 a 元素,并添加一些CSS使其看起来正常。:

a {
color: black;
text-decoration: none;
}

<a href="https://sway.office.com/iDYEqw?ref=Link">
  <button class="btn post-btn">Read More &nbsp;
</a> 
<i class="fas fa-arrow-right"></i></button>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

8 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

8 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

8 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

8 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

9 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

9 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

9 月前