我可以使用 <button> 而不是 <a> 去#location吗？

Question

我有这个代码。

<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> 来实现吗？我将其更改为按钮，但它们不起作用。

Answer 1

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

Answer 2

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

Answer 3

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

如果您使用的是 bootstrap，您只需在锚中添加 class="btn btn-primary"，例如：

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

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

Answer 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>

祝你好运！

Answer 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>

Answer 6

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

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

在这种情况下，它将带您到 anotherpage.aspx 页面的 id 为 'something' 的元素。现在按钮的用途完全不同，但是有一些方法可以满足您的要求，但不推荐这样做。在这种情况下你应该使用锚标签。

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

谢谢。

我可以使用 <button> 而不是 <a> 去#location吗？

Can I use a <button> instead of <a> to go to #location?

html

javascript

jquery

href