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格式,預覽網頁效果。

注意事項

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

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場