html網頁設計中用按鈕改變連結及打開方式

上一篇經驗中,講解了如何給超連結添加快捷鍵;在這篇里,我來講下怎麼用按鈕來改變連結及打開方式。

工具/原料

HTML超連結

方法/步驟

打開文本編輯器或者記事本軟體,輸入網頁基本標籤代碼

<html>

<body>

</body>

</html>

點擊<html>標籤後,輸入<head>頭標籤,並在標籤中定義<script>代碼

<head>

<script type="text/javascript">

</script>

</head>

在<script></script>標籤之間定義一個changelink()函數,用來執行改變連結的功能。

function changeLink()

{

document.getElementById('jingyan').innerHTML="訪問"

document.getElementById('jingyan').href="http://jingyan.baidu.com"

document.getElementById('jingyan').target="_blank"

}

功能函數定義好以後,點擊正文<body>標籤後,添加一個文字連結,將id設置為函數中調用的參數名稱。

<a id="jingyan" href="http://wenku.baidu.com">訪問百度文庫</a>

然後給網頁上添加一個按鈕,點擊後可以改變連結及打開方式。

<input type="button" onclick="changeLink()" value="改變連結">

再添加一些說明性的文字來做個解釋

<p>點擊上面這個連結,會默認在_self(自己)窗口打開網頁;點擊【改變連結】按鈕後,文字連結改變,點擊連結就會在_blank(新窗口)打開。</p>

最後將代碼內容保存為html格式,預覽網頁效果。

注意事項

如果您喜歡小編的文章,請點擊右下角的分享按鈕,分享給更多的朋友。

相關文章

  1. 一網學UI設計和網頁設計的按鈕設計10要點

    按鈕是大家經常用到的東西,但是按鈕中應該注意些什麼呢? 工具/原料 清晰的大腦一個 電腦一個 方法/步驟 很多學網頁設計的朋友都是網上在下各種素材來建站.比如一些UI套件包等等.這些資源在網上是免費的 ...
  2. HTML 連結默認打開方式標籤元素

    HTML 超連結(錨文本)默認打開方式與默認連結URL地址標籤元素 html base目錄 語法與結構 base標籤使用說明 Base介紹 base標籤使用 案例代碼效果示例 base標籤屬性總結 方 ...
  3. 連結的打開方式有哪些?怎麼設置

    一個超連結或錨文本的打開方式有四種,分別是新窗口打開.當前窗口打開.父窗口打開.頂級窗口打開,為了適合用戶的體驗度需要對這幾種打開方式進行認識.篩選.下面就說說這四種打開方式的設置方法: 工具/原料 ...
  4. 如何改變文件的打開方式

    電腦上的同一個文件可以用不同的程序來打開,最常見的就是音頻文件可以用不同的音樂播放器來打開,一個視頻文件也可以用不同的視頻程序來打開.雙擊打開一個文件的時候,會使用默認的程序,但有的時候我們不需要默認 ...
  5. 【FLASH路上】-學習網頁製作之按鈕設計小技巧

    說起按鈕,很多人第一聯想就是連結,似乎在大家看來,按鈕的作用於網頁連結差不多,都是從一個頁面跳轉到了另外一個頁面.學網頁設計的同學們要明白,其實他們是有區別的:    對於按鈕來說,往往代表確認或者操 ...
  6. java按鈕改變網頁元素的技巧

    java按鈕是一個非常強大的工具,我們可以使用這樣的工具達到改變網頁元素內容的目標.點擊一下按鈕網頁上的內容就發生改變,滑鼠離開按鈕也會彈出一個窗口.這就是java按鈕的奇妙之處. 工具/原料 dre ...
  7. 網頁設計製作教程《五》—友情連結

    網頁設計製作教程<五>-友情連結 效果圖: 工具/原料 photoshop dreamweaver 步驟/方法 編寫link div 編寫<友情連結>標題,用h3標籤 編寫友情 ...
  8. 在網頁設計中怎麼更改超級連結中文字的顏色

    我此處以DW為例!如果你使用文本編輯器做網頁,我只能讚嘆你一聲:牛人! 如下圖:   我把[電影]兩字做了超連結之後文字顏色默認為藍色 怎麼把它改成其它顏色呢? 請看下圖: 我用滑鼠圈選需要更改顏色的 ...
  9. 網站建設時網頁設計常見問題

    在製作一個網頁的時候,不管是多麼熟練的設計師都會遇到許許多多的問題.當然,網頁設計中也有很多的設計技巧.下面山西天盛時代就帶大家一起來學習下 1. 為什麼網站的首頁文件名一般命名為index.htm或 ...
  10. 網頁講解 網頁設計的瀏覽

    我們所了解的網頁,五花八門,做什麼的都有,他們在設計網頁時都經過設計,以突出自己的網頁,表達自己的主題為主.根據不同的網頁,有不同的分類 比如有 (企業官網類)(電子商務類)(多媒體類)(中和門戶類) ...
  11. 網頁設計的流程

    上次在"淺談布局"中只是大概的說了一下布局的相關知識,在本文中就從實際的應用角度來說說布局."淺談布局"中就有提到網頁的布局有一個基本型(上下.上中下.左右.左 ...
  12. 網頁設計初級常見問題:[3]如何確定網頁尺寸

    當你確定好了要做的網頁的風格,著手設計的第一步,應該就是確定網頁寬度了. 確定網頁寬度的依據,主要有: 網頁內容類型,比如門戶類.博客類...: 網頁風格,韓國風格.歐美風格.國內常見...: 網頁功 ...
  13. 網頁設計技巧:如何做好網站滾動視差設計

    作為未來網頁設計的熱點趨勢之一的"滾動視差設計"在近年來被越來越多網站所採用,特殊新穎的展示模式也讓許多用戶眼前一亮.作為一個視覺設計其實做設計的時候有很多束縛,能夠遇到一個可以玩 ...
  14. 怎樣自學網頁設計

    隨著網際網路的發展,網頁設計作為一個新的工作領域,引起了越來越多的人的關注,那麼想從事這個行業,又不是科班出生的我們,應該通過怎樣的方法自學呢?現在小漁便將自己的親身經歷告知大家,希望大家都能學有所成 ...
  15. 網頁設計初級常見問題:[2]怎樣命名更專業

    本篇講述網頁設計中需要命名處,應該遵守的一些被廣泛使用的命名規則. 胡亂命名,必須嚴格禁止. 理由:1.代碼可讀性差,增加維護.修改.及合作同事的使用等難度:2.太不專業. 大部分的常用命名規範都是英 ...
  16. 【網頁設計】如何通過代碼添加水平線(下劃線)

    如何通過代碼添加水平線(下劃線)代碼<hr /> 工具/原料 DW軟體 方法/步驟 打開我們的軟體, 新建一個html文檔 在這空白處添加文字 寫入我們的水平線代碼<hr /> ...
  17. 網頁設計的基礎知識有哪些?

    對於剛步入或者想要步入網頁設計領域的朋友們來說,需要掌握很多網頁設計的基礎知識,下面我就為大家講解一下網頁設計主要有哪些基礎知識. 網頁與網站的關係 首先介紹一下什麼是網頁,網頁是由HTML組成的一個 ...
  18. 網頁設計製作基礎:Dreamweaver軟體界面(一)

    網頁製作已經成了當今社會每個人必須具備的基本技能和素質.在網際網路高速發展的今天,不會網頁製作就有可能被社會淘汰.同時,學好網頁的製作,也有可能成為你學習或者事業的敲門磚.小編今天就跟大家一起來學習網頁 ...
  19. 學習網頁設計的經驗和技巧小結

    自己做網頁設計也算有一段時間了,總結了自己的感悟和學習設計的一點經驗與大家分享,希望得到大家更多的建議. 工具/原料 一.配色 二.布局 三.細節 四.心態 五.技能 六.用戶體驗 方法/步驟 初級階 ...
  20. 網頁設計經驗之:5個優秀的網頁設計理念全解析

    和其它類型的設計所不同的是,網頁設計一直在隨著時代的發展而不斷的變化著.因此,網頁設計師們需要時常"升級"自己,來緊跟設計潮流.這些年來,不斷湧現的各種新思潮.新理念,讓網頁設計領 ...