首頁  >  文章  >  web前端  >  實例講解怎麼用html實作點擊Button元素跳轉頁面

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

PHPz
PHPz原創
2023-04-07 17:07:313914瀏覽

在HTML中,可以使用標籤來實現頁面跳轉,但是如何透過按鈕實現頁面跳轉呢?這就需要用到HTML中的

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

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

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



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


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


#< /html>

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

  1. 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>
  1. 在上述程式碼中,點擊「跳到頁面」按鈕時,會呼叫名為goToPage的函數,函數內部實現頁面跳轉。

HTML Button實作後退與刷新操作



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


rrreee

##rrreee

rrreee

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn