實例講解怎麼用html實作點擊Button元素跳轉頁面

在HTML中，可以使用標籤來實現頁面跳轉，但是如何透過按鈕實現頁面跳轉呢？這就需要用到HTML中的標籤。本文將介紹在HTML中點選Button元素跳轉頁面。

1. HTML Button基本語法

用HTML Button實作頁面跳轉需要在

標籤內加入onclick屬性，然後在屬性值中寫入J​​avaScript程式碼實現頁面跳轉，基本語法如下：

跳頁

其中，window.location.href是JavaScript程式碼的一部分，表示跳轉的頁面URL位址。

2. HTML Button頁面跳轉範例程式碼

下面是一個HTML Button實作頁面跳轉的範例程式碼：

<title>HTML Button跳转页面</title>

<button onclick="window.location.href=&#39;https://www.baidu.com/&#39;">前往百度</button>

#< /html>

在上述程式碼中，當點擊「前往百度」按鈕時，會跳到百度的官方網站。

3. HTML Button跳到相對路徑頁面

在實際開發中，經常需要跳到同一網站內的其他頁面，這時可以使用相對路徑，而不是完整的URL位址。範例程式碼如下：

<title>HTML Button跳转页面</title>

##

<button onclick="window.location.href=&#39;about.html&#39;">关于我们</button>

<title>HTML Button跳转页面</title>

#在上述程式碼中，當點擊「關於我們」按鈕時，會跳到同一目錄下的about.html頁面。

使用JavaScript實作HTML Button跳轉

除了直接在onclick屬性中寫入JavaScript程式碼實現頁面跳轉，還可以透過一個函數來實現頁面跳轉。範例程式碼如下：

<button onclick="goToPage()">跳转页面</button>
<script type="text/javascript">
    function goToPage() {
        window.location.href = "https://www.baidu.com/";
    }
</script>

##

<title>HTML Button跳转页面</title>

<button onclick="window.history.back()">返回</button>
<button onclick="window.location.reload()">刷新</button>

5. 在上述程式碼中，點擊「跳到頁面」按鈕時，會呼叫名為goToPage的函數，函數內部實現頁面跳轉。

HTML Button實作後退與刷新操作

除了跳到其他頁面，HTML Button還可以實現後退與刷新操作。範例程式碼如下：

rrreee

##rrreee

rrreee

#########在上述程式碼中，當點擊“返回”按鈕時，會回到前一頁，而點擊“刷新”按鈕則會重新整理目前頁面。 ######總之，HTML Button是實現頁面跳躍、後退、刷新等功能的重要元素之一。透過掌握HTML Button的基本語法與相關知識，便可輕鬆實現各種操作，為Web開發提供便利的工具。 ###

以上是實例講解怎麼用html實作點擊Button元素跳轉頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！