我可以使用 <button> 而不是 <a> 转到#location 吗？答案

【问题标题】：Can I use a <button> instead of <a> to go to #location?我可以使用 <button> 而不是 <a> 转到#location 吗？
【发布时间】：2016-09-30 18:35:40
【问题描述】：

我有这个代码。

<li class="active">
    <a href="#tab-weekly" data-toggle="tab">Weekly Payment</a>
</li>
<li>
    <a href="#tab-advance" data-toggle="tab">Advance Payment</a>
</li>
<li>
    <a href="#tab-data" data-toggle="tab">Expenses</a>
</li>

我的问题是我可以使用<button> 而不是<a> 来实现这一点吗？我将其更改为按钮，但它们不起作用。

【问题讨论】：

究竟是什么不工作？
Onclick 没有显示带有id 的 div。
可能重复stackoverflow.com/questions/5025941/…

标签： javascript jquery html href

【解决方案1】：

Button 没有href 功能，所以除非你使用一些 JS 函数来模拟这个 - 不，你不能

【讨论】：

似乎更像是一条评论。
@Jai：问题是：“我可以这样做吗？”答案是否定的。它如何“更像评论”？
@BoltClock 那么最后三个字应该贴出来！对……！
@Jai：很抱歉，您的评论难以理解。能改一下吗？
@Jai：答案是解释为什么答案是否定的！为什么您希望有人在没有解释的情况下发布答案？这个问题与这个答案有什么关系？

【解决方案2】：

是的。使用<button type="button" onclick="window.location.href='YOUR URL HERE'">Link Text</button>

【讨论】：

谢谢。为了帮助。我试过<button type="button" class="btn btn-primary" onclick="window.location.href="reports/daily_report#tab-weekly">Weekly Payment</button> 但没有工作
尝试用单引号替换 URL 周围的双引号，并确保关闭 onclick 分配周围的引号
@Ricardo Reyna：您确实意识到您的答案中存在同样的错误，而 OP 只是盲目地抄袭，对吧？
是的，我看到了错误并在回复之前编辑了我的回复。谢谢

【解决方案3】：

您可以使用<a class="your-btn-style"> 以上的样式来显示您的锚点，就像一个按钮。

如果您使用的是引导程序，您可以简单地在锚点中添加 class="btn btn-primary" 例如：

<a href="#tab-advance" class="btn btn-primary" data-toggle="tab">Advance Payment</a>

我在我的项目中也使用了这种方法：

【讨论】：

我需要按钮，而不是标签 :(
哦 :( 所以你不能用 href 代替 JS
是的.. 我现在开始工作了。不过感谢您的帮助。

【解决方案4】：

你可以试试看this

或者您可以创建一个button，其中包含<a href>。我不知道您想通过将其更改为按钮来实现什么目标？

<button type="button">
   <a href="www.google.com">hello</a>
</button>

如果是样式，您可以将样式应用于a 标签，如下所示<a href="http://google.com" class="My class">Go to Google</a>

祝你好运！

【讨论】：

我试过<button type="button" class="btn btn-primary" onclick="window.location.href="reports/daily_report#tab-weekly">Weekly Payment</button>但没有用
OP 正在尝试使用 href 的 goto 书签部分，例如 href='#id' 而不仅仅是创建指向外部网站的链接。

【解决方案5】：

您不能在button 中使用href，但可以使用data-href 属性来完成这项工作。当button 点击获取data-href 的值并使用window.location.hash 去定位id。

$("button").click(function(){
    window.location.hash = $(this).data("href");
});

#first, #second, #third {
    height: 200px;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button data-href="#first">First</button>
<button data-href="#second">Second</button>
<button data-href="#third">Third</button>

<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>

【讨论】：

【解决方案6】：

每当您在锚标记的href 属性中使用#something 时，它实际上会将您带到同一页面中ID 为“某物”的元素。你也可以这样使用它：

<a href="http://www.somewhere.com/anotherpage.aspx#something">click</a>

在这种情况下，它会将您带到另一个页面的元素，该元素的 id 是“某物”。现在按钮的用途完全不同，但是有一些方法可以满足您的要求，但不推荐。在这种情况下，您应该使用锚标记。

这里有一个很好的链接来展示锚和按钮标签之间的区别。 Check it.

谢谢。

【讨论】：