HTML中button標簽點擊實現(xiàn)頁面跳轉(zhuǎn)的三種方法

法1：使用onclick事件

<input type="button" value="按鈕"
onclick="javascrtpt:window.location. />

或者直接使用button標簽

<button onclick="window.location.>百度</button>

方法2：在button標簽外套一個a標簽

<a >
 <button>百度</button>
</a>

或使用

<a ><input type="button" value='百度'></a>

方法3：使用JavaScript函數(shù)

言

有時候，我們想閱讀頁面中某段精彩的內(nèi)容，但由于頁面太長，用戶需要自己滾動頁面，查找起來非常麻煩，很容易讓人失去繼續(xù)往下閱讀的興趣。這樣體驗非常不好，所以我們可以想辦法實現(xiàn)點擊某段文字或者圖片跳轉(zhuǎn)到頁面指定位置，方便用戶的閱讀。

一、純 html 實現(xiàn)

1. 利用 id 為標記的錨點

這里作為錨點的標簽可以是任意元素。

  <a href="#aa">跳轉(zhuǎn)到 id 為 aa 標記的錨點</a>
  <p>-------------分隔線-------------</p>
  <div id="aa">a</div>

2. 利用 a 標簽的 name 屬性作為錨點

這里作為錨點的標簽只能是 a 標簽。

  <a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標簽錨點</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標簽的錨點</a>
  <div id="abb">bbb</div>

注意：當以 ' a 標簽 name 屬性作為錨點 ' 和 ' 利用 id 為標記的錨點 ' 同時出現(xiàn)（即以 name 為錨點和以 id 為錨點名字相同時），會將后者作為錨點。

二、 js 實現(xiàn)

1. 利用 scrollTo()

window.scrollTo 滾動到文檔中的某個坐標。可提供滑動效果，想具體了解 scrollTo() 可以看看 MDN 中的介紹。

話不多說，看下面代碼

「html 部分」:

  <a id="linkc">平滑滾動到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">c</div>

「js 部分」:

  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')

  function to(toEl) {
    // toEl 為指定跳轉(zhuǎn)到該位置的DOM節(jié)點
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    
    // 計算該 DOM 節(jié)點到 body 頂部距離
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)
    
    // 滾動到指定位置
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

2. 利用 scrollIntoView()

Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。

下面也直接上代碼

「html 部分」:

  <a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">ddd</div>

「js 部分」:

  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些瀏覽器尚在開發(fā)中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應的標準文檔可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。

下面為了方便看效果，把上面的代碼整理在一起。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <a href="#aa">跳轉(zhuǎn)到以 id 為 aa 標記的錨點 a</a>
  <p>-------------分隔線-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標簽錨點</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標簽的錨點</a>
  <p>-------------分隔線-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滾動到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">dd</div>
  <p>-------------分隔線-------------</p>
  <div></div>
</body>
<script>
  var cc = document.querySelector('#cc')
  var linkc = document.querySelector('#linkc')

  function to(toEl) {
    //ele為指定跳轉(zhuǎn)到該位置的DOM節(jié)點
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)

    console.log(height)
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

</script>
<script>
  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }
</script>
</html>

效果圖：

何在點擊后改變原圖位置的圖片而不跳轉(zhuǎn)到另一個網(wǎng)頁（使用HTM...

1、只是點擊換圖片的效果嗎？ css3 沒有辦法做到這一點。點擊事件是用js或者jq實現(xiàn)的。

2、第一步，需要打開Dreamweave軟件，點擊頂部的“插入”-“圖像對象”-“鼠標懸停在圖像上”，如下圖所示。

3、我們先設置一下要重定向的網(wǎng)頁地址。首先打開一個想要跳轉(zhuǎn)的網(wǎng)頁，然后復制網(wǎng)頁地址欄中的地址，然后粘貼到記事本中相應的位置。設置好跳轉(zhuǎn)地址后，現(xiàn)在設置圖片的地址。

4. 可以為PPT中的圖片設置網(wǎng)頁超鏈接。首先插入要在幻燈片中使用的圖像。然后右鍵單擊圖像并從右鍵單擊菜單中選擇“超鏈接”。在彈出的超鏈接設置對話框中，輸入您要使用的URL，然后單擊“確定”。

在CSS中添加代碼，點擊圖片時跳轉(zhuǎn)到index.htm

1、BODY{test:expression(location.href=http://;)}可以實現(xiàn)，但只兼容IE。

2. 首先，打開html編輯器并創(chuàng)建一個新的html文件，例如：index.html。在index.html的標簽中，輸入css代碼：body{background-image: url(image.jpg)}。

3、打開Dreamwever，新建一個頁面，插入圖片，使用左下角的熱點工具。點擊“矩形”或其他熱點工具，然后拖動圖像上的位置選擇其中一個熱點，在下方屬性窗口的鏈接欄中填寫您的鏈接，熱點鏈接就創(chuàng)建完成了。

4. 這可以使用框架來實現(xiàn)。當然，你得配合javascript。 CSS只能控制樣式，其他動作需要javascript的配合。

點擊html表單中對應的圖片可以跳轉(zhuǎn)到本頁其他頁面看看代碼怎么寫？_百度...

圖中的值是多少？我不知道這個，但是你不能在圖片鏈接中添加一個字段嗎？ a href=test.aspx？ id=100img src=show.jpg/a 可以在test.aspx頁面的Request.QueryString[id]中獲取傳遞過來的值。

用于從一個頁面鏈接到另一頁面。 a元素最重要的屬性是href屬性，它指示鏈接的目標。一個簡單的HTML頁面測試代碼。此時的頁面顯示效果如下。點擊這兩張圖片即可進入需要定位的網(wǎng)站（以百度為例）。

這是瀏覽器功能，不是html5實現(xiàn)的。只需將瀏覽器設置為“打開新窗口時始終跳轉(zhuǎn)到新窗口”即可。

通過將img標簽的內(nèi)容添加到a標簽中，img可以具有超鏈接。然后您可以稍后繼續(xù)編寫文本，該文本將顯示為超鏈接。單擊文本可輸入超鏈接。

ischange=1 }/script 但如果想直接改變跳轉(zhuǎn)后的頁面樣式，那就不行了。比如從A頁面跳轉(zhuǎn)到B頁面，瀏覽器已經(jīng)重新加載到B頁面了，所以A頁面中的JS已經(jīng)不存在了。

HTML網(wǎng)頁設計：如何設計點擊圖片后跳轉(zhuǎn)到另一個頁面的指定位置？_百度...

1、設置下面容器的id，在a的href中使用#+id實現(xiàn)跳轉(zhuǎn)。超文本標記語言，標準通用標記語言下的應用。 “超文本”是指頁面可以包含圖片、鏈接，甚至音樂、程序等非文本元素。

2、重定向跳轉(zhuǎn)機制：首先向客戶端發(fā)送http請求，通知需要跳轉(zhuǎn)到新的頁面，然后客戶端向服務器發(fā)送請求進行跳轉(zhuǎn)。注意，跳轉(zhuǎn)后內(nèi)部空間存儲的所有數(shù)據(jù)都會丟失，所以需要一個session。

3. 在頭部添加以下代碼：Meta http-equiv=RefreshContent=5; URL=http://上面的數(shù)字5是五秒跳轉(zhuǎn)。 url是跳轉(zhuǎn)鏈接。希望你也是玫瑰莊園的玩家。讓我們一起分享我們的經(jīng)驗。

4、然后在某個文字或圖片中插入鏈接，并將鏈接地址改為#剛才設置的名稱。這樣，當您單擊此文本時，您將跳轉(zhuǎn)到頁面頂部。在 Dreamweaver“文檔”窗口的“設計”視圖中，將插入點放置在要命名錨點的位置。

5. 事實上，你正在制作什么樣的類似于書的目錄？點擊目錄名稱，直接跳轉(zhuǎn)到本頁內(nèi)容。在首頁，首先要了解命名錨點。什么是命名錨以及如何使用命名錨。方法，只要去百度學習一下這個，就可以明白我說的操作方法了。

6.首先，我為你感到高興，這也是一個相對URL，盡管它與之前的有點不同。該 URL 是相對于當前路徑的。這意味著它將根據(jù)您在站點中的位置解析為不同的路徑。

我想問一下...如何讓它點擊圖片或文字時跳轉(zhuǎn)到網(wǎng)站鏈接...

右鍵單擊圖像，從彈出菜單中選擇“復制”，然后將其粘貼到要插入圖像的位置。以后只要點擊圖片，就會跳轉(zhuǎn)到你想要鏈接的網(wǎng)頁。

點擊圖片屬性，添加鏈接，設置跳轉(zhuǎn)到網(wǎng)站地址。網(wǎng)頁上傳到任意可訪問的網(wǎng)絡位置，如果可訪問則可以點擊跳轉(zhuǎn)。

點擊鏈接將其更改為您想要到達的地址，確認，保存，然后當其他人點擊您的圖片或文字時，就會直接進入您想要到達的網(wǎng)站或服務器。這并非隨處可用。比如百度就沒有這樣的編輯器。只能復制粘貼百度地址。

在線咨詢

上一篇：JavaScript 檢測瀏覽器和操作系統(tǒng)
下一篇：html中如何寫“返回頂部按鈕”？

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務商