JS中的標簽


<a>標簽可定義錨。一個錨有兩種用法:

  • 通過使用 href 屬性,創建一個到另外一個文檔的鏈接
  • 通過使用 name 或 id 屬性,創建一個文檔內部的書簽 

如果是在 HTML 5 中,它定義為:超鏈接,用於從一個頁面連接到另一個頁面。此時,name 屬性將由 id 代替。

它的屬性在 W3school 中有詳細說明。

一.鏈接:
通常格式:

<a href="url">text</a>

1. <a> 標簽中調用 JS 方法(點擊事件)
有以下幾種方法:比如調用 mapObj.zoomOut(); 方法。
1)

<a href="mapObj.zoomOut();">縮小</a>

此種方法在傳遞 this 等參數時很容易出現問題,而且 javascript: 協議作為 <a> 的 href 屬性時不僅會導致不必要的window.onbeforeunload 事件的觸發,還會使 IE 中的 gif 動畫圖片停止播放。W3C 標准不推薦在 href 里面執行 javascript 語句。
2)

<a href="javascript:void(0);" onclick="mapObj.zoomOut();">縮小</a>

這種方法是很多網站最常用的方法,也是最周全的方法,onclick 方法負責執行 JS 函數,而 void 是一個操作符,void(0) 返回undefined,地址不發生跳轉。而且這種方法不會像第一種方法一樣直接將 JS 方法暴露在瀏覽器的狀態欄。
3)

<a href="javascript:;" onclick="mapObj.zoomOut();">縮小</a>

這種方法同 2),區別在於執行了一條空的 JS 代碼。
4)

<a href="#" onclick="mapObj.zoomOut();">縮小</a>

這種方法也是網上很常見的代碼,# 是標簽內置的一個方法,代表 top 的作用。所以用這種方法點擊后網頁返回到頁面的最頂端,但是對於一個很長的頁面而言,可能會在跳轉時產生頁面滑動的效果。
5)

<a href="#" onclick="mapObj.zoomOut();">縮小</a>

這種方法點擊執行了js函數后return false,頁面不發生跳轉,執行后還是在頁面的當前位置。
2.在新頁面跳轉
在標簽內添加 target="_blank" 屬性,比如:

<a href="http://www.test.com/" target="_blank">test</a>

 target 屬性是在何處打開目標 URL。取值如下:
  • _blank - 在一個新的未命名的窗口載入文檔
  • _self - 在相同的框架或窗口中載入目標文檔
  • _parent - 把文檔載入父窗口或包含了超鏈接引用的框架的框架集
  • _top - 把文檔載入包含該超鏈接的窗口,取代任何當前正在窗口中顯示的框架 
3.<td>標簽中添加超鏈接
  只能在<td></td>標簽內添加超鏈接,而不能在<tr></tr>中添加(不符合標准)。如果直接使用<a href></a>無效,可通過以下代碼實現:

<td style="cursor:pointer;" onclick="window.open('http://blog.163.com/hdyl_8603','_blank')">網址 :<a href=''>hdyl的blog</a></td>


二.書簽:
一般用於同一文檔內部的跳轉。
被跳轉的部分,添加標簽:

<a name="test"></a>

添加鏈接的部分,添加標簽:

<a href="#test"></a>

三.樣式: 
如果需要修改某些內容的鏈接樣式,可設置一個 class 而將這些內容放在這個 class 內。比如:
<head></head> 內設置樣式:

<style type="text/css">
html,body{height:100%;margin:0;padding:0;font-size:15px;}
/*右鍵菜單樣式*/
.triangle-border {
position:relative;
padding:15px;
border:2px solid #5a8f00;
color:#333;
background:#fff;
/* css3 */
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
/*右鍵菜單項樣式,triangle-border 內的 <a> 標簽樣式*/

.triangle-border A:link{color:#009933;text-decoration:none;font-family:Microsoft YaHei}
.triangle-border A:visited{color:#009933;text-decoration:none;font-family:Microsoft YaHei}
.triangle-border A:active{color:#009933;text-decoration:none;font-family:Microsoft YaHei}
.triangle-border A:hover{color:#009933;text-decoration:none;font-family:Microsoft YaHei}
</style>

<body></body> 中應用:

<div class="triangle-border">

<table>

<tr>

<td><a href="javascript:void(0);" onclick="mapObj.zoomIn();">放大</a></td>

</tr>

</table>

</div>

效果:

JS中的a標簽 - ☆無心﹎ - 無心之過
 
 
文章來源:http://blog.163.com/hdyl_8603/blog/static/34622429201321241215120/


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM