HTML Button Href|极客教程

HTML Button Href

在HTML中，我们通常使用按钮来触发不同的操作或者跳转到不同的页面。在本文中，我们将探讨如何使用HTML按钮来实现超链接的功能，也就是所谓的”button href”。

1. 使用按钮跳转到不同的URL

我们可以使用button标签结合onclick事件来实现按钮点击后跳转到不同的URL。下面是一个简单的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button Href Example</title>
</head>
<body>

<button onclick="window.location.href='https://how2html.com'">Go to how2html.com</button>

</body>
</html>

Output:

HTML Button Href

在上面的示例中，当用户点击按钮时，页面会跳转到https://how2html.com这个网址。

2. 在新标签页打开链接

有时候我们希望链接在新的标签页中打开，可以通过给按钮设置target=”_blank”来实现。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button Href Example</title>
</head>
<body>

<button onclick="window.open('https://how2html.com', '_blank')">Open how2html.com in new tab</button>

</body>
</html>

Output:

HTML Button Href

在上面的示例中，当用户点击按钮时，https://how2html.com这个网址会在新的标签页中打开。

3. 使用按钮跳转到内部锚点

我们也可以使用按钮来实现跳转到页面内部的锚点位置，示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button Href Example</title>
</head>
<body>

<button onclick="window.location.href='#section2'">Go to Section 2</button>

<h2 id="section2">Section 2</h2>
<p>Content of section 2</p>

</body>
</html>

Output:

HTML Button Href

在上面的示例中，当用户点击按钮时，页面会滚动到ID为”section2″的位置。

4. 通过JavaScript函数控制跳转

除了直接在按钮的onclick事件中写跳转逻辑，我们也可以通过JavaScript函数来实现更复杂的控制。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button Href Example</title>
<script>
function goToHow2html() {
   window.location.href = 'https://how2html.com';
}
</script>
</head>
<body>

<button onclick="goToHow2html()">Go to how2html.com</button>

</body>
</html>

Output:

HTML Button Href

在上面的示例中，当用户点击按钮时，会调用goToHow2html()函数，实现跳转到https://how2html.com。

5. 隐藏按钮的默认样式

默认的按钮样式可能与我们的页面风格不符，我们可以通过CSS来自定义按钮的外观。示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Button Href Example</title>
<style>
.custom-button {
   background-color: #3498db;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
}
</style>
</head>
<body>

<button class="custom-button" onclick="window.location.href='https://how2html.com'">Go to how2html.com</button>

</body>
</html>

Output:

HTML Button Href