超鏈接a的target屬性

<a>標籤的target意思很明確就是在哪裏打開目標文檔。

 

第一種情況:

默認情況:當我們沒有設置超鏈接屬性target的value值時默認是_self,即<a target="_self">。它使目標文檔顯示在超鏈接所在架或者窗口中。所以下面兩行代碼效果相同。

<a href="http://www.baidu.com">百度</a><a href="http://www.baidu.com" target="_self">百度</a>

第二種情況:

給一堆超鏈接以相同的target值,這種方式可以使得一組超鏈接在同一窗口打開,即通過單擊一個窗口中的不同鏈接控制另一窗口內容變化。首先,瀏覽器會找與target值相符的框架或者窗口中的文檔,有則在其中顯示文檔。如果不存在,瀏覽器打開一個新窗口,給其指定一個標識爲target值,之後只要該窗口不關閉,其它超鏈接就可以指向這個新窗口。

<ul>
    <li><a href="http://www.google.com.hk" target="HelloWorld">google</a></li>
    <li><a href="http://cn.bing.com" target="HelloWorld">必應</li>
    <li><a href="http://www.baidu.com" target="HelloWorld">百度</a></li>
    <li><a href="http://www.soso.com" target="HelloWorld">搜搜</a></li></ul>

第三種情況:

在框架中使用,現在有3個頁面,一個father.html,一個son1.html,一個son2.html。father頁面承載son1和son2,實現選擇son1中不同鏈接,在son2中動態變化。【//lxy:frameset和frame在html5中已經被棄用了】

 father.html代碼:

<frameset cols="30%,*">
    <frame src="son1.html">
    <frame src="son2.html" name="son2">
 </frameset>

son1.html代碼:

複製代碼

<body><h1>son1</h1><ul>
    <li><a href="http://www.google.com.hk" target="son2">google</a></li>
    <li><a href="http://cn.bing.com" target="son2">必應</li>
    <li><a href="http://www.baidu.com" target="son2">百度</a></li>
    <li><a href="http://www.soso.com" target="son2">搜搜</a></li></ul></body>

複製代碼

son2.html代碼:

<body><h1>son2</h1></body>

效果:

第四種情況:

target的特殊取值:_blank,_self,_parent,_top,_new。爲了理解這些個取值的不同,我們在iframe中來看一眼。主要是target值_parent和_top的區別。

首先,有四個頁面,一個father.html,一個big.html,一個middle.html,一個small.html。

father.html承載big.html,代碼如下:

<body>father<br/><iframe src="big.html" width="800px" height="800px"></iframe></body>

big.html承載middle.html,代碼如下:

<body bgcolor="darkgrey">iframe big<br/><iframe src="middle.html" width="600px" height="600px"></iframe></body>

middle.html承載small.html,代碼如下:

<body bgcolor="darkcyan">iframe middle<br/><iframe src="small.html" width="400px" height="400px" ></iframe></body>

small.html中有一個超鏈接,代碼如下,我們重點來看看給這個超鏈接以不同的target值相應的效果:

<body bgcolor="#b8860b">iframe small<br/><a href="http://www.baidu.com">百度</a></body>

原始的效果是這樣:

設置target值爲_self(同樣也是默認取值)效果如下:在超鏈接所在窗口中頁面打開。

設置target值爲_parent效果如下:父窗口中打開。如果本身是頂級窗口則_parent效果和_self相同。

設置target值爲_top效果如下:在頂級窗口中打開。

 所以綜合上面效果,在用到多層框架時需要注意超鏈接跳轉時target值的選擇。

第五:

target屬性值_new和_blank的區別:

_new始終在同一個新窗口中打開

_blank是點擊一次打開一個新窗口。


來源:愛創課堂

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章