<a href="javascript:void(0)" click="function(){}" />=
a 標簽樣式
一組專門的預定義的類稱為偽類用於處理超鏈接的狀態,超鏈接的文字的狀態可以通過
偽類選擇器+樣式類進行控制 <a class="mycls" ></a>
0) 所有狀態下的鏈接 .mycls{color:red}
1) a:link 未訪問的連接 .mycls a:link{color:blue}
2) a:visited 已訪問的鏈接 .mycls a:visited{color: visited}
3) a:active 激活時(鏈接獲取焦點)鏈接的顏色 .mycls a:active{color:blue}
一般情況下 a:hiver和a:visited的顏色是一種的,這4個狀態的過程是: a:link ->a:hover->a:active->a:visited
另外,a:active不能設置有無下划線(總是有的)
<style>
a {font-size:16px}
a:link {color: blue; text-decoration:none;} //未訪問:藍色、無下划線
a:active:{color: red; } //激活:紅色
a:visited {color:purple;text-decoration:none;} //已訪問:purple、無下划線
a:hover {color: red; text-decoration:underline;} //鼠標移近:紅色、下划線
</style>
target的屬性
<a>標簽的target屬性規定在何處打開鏈接文檔
如下面這行表示在新的窗口中打開文檔
<a href="http://www.baidu.com" target="_blank"> visit w3school </a>
name屬性
name屬性規定錨(anchor)的名稱
可以使用name屬性創建html頁面中的書簽,書簽不會以任何獨特方式顯示,它對讀者可以是不可見的。
當使用命名錨(named anchors)時,我們可以創建直接跳轉至該命名錨(比如頁面中某個小節)的鏈接,這樣使用者就無需不停滾動頁面來尋找需要的信息了。
命名語法
<a name="label">錨(顯示在頁面上的文本)</a>
ps:錨名稱可以是任何名字
ps:可以使用id屬性來代替name屬性,命名錨同樣有效
例子:
1)我們在html文檔中對錨進行命名(創建一個書簽)
<a name="tips">基本的注意事項 - 有用的提示</a>
2)在同一個文檔中創建只想該錨的鏈接
<a href="tips">有用的提示</a>
3)也可以在其他頁面中創建指向,該錨的鏈接
<a href="http://mypro#trip">有用的提示<a>
a 標簽的事件
將<a>標簽的href屬性值設置為"#",並設置onclick屬性。
在這種處理方式下,用戶可以很明顯地看出哪些文字是超鏈接。
在 單擊該超鏈接時,也可以執行onclick屬性值中的JavaScript語句,並且不會跳轉網頁。
但是,由於href的屬性值為"#",瀏覽器會自動跳 轉到當前網頁的頂部。
如果當前網頁內容比較多,瀏覽器窗口出現下拉滾動條時,可以很明顯地看到跳轉,而這種跳轉往往不是網頁設計者的本意。
在沒有為<a>標簽設置onclick屬性時,如果單擊了該超鏈接,瀏覽器會加載href屬性中的URL。
如果href屬性值並不是一 個URL,而是一個JavaScript語句的話,那么瀏覽器就會執行該語句。
因此,可以直接將JavaScript語句寫在<a>標簽的 href屬性值中,讓href屬性代替onclick屬性。
在這種處理方式下,既可以響應click事件,又可以不讓網頁跳轉。
在 a 標簽的屬性值中添加JavaScript語句之前,必須要先使用"javascript:"語句來聲明href屬性值中的語句為
javaScript語句,否則瀏覽器就會將href屬性值中的JavaScript語句當成URL進行加載。
<a href="javascript:showFlag()">ssgao</a> 執行showFlag()方法
<a href="" onclick="showFlag();">ssgao</a> 執行showFlag()方法,並會跳轉到href指向的頁面當href=""刷新當前頁面
<a href="">ssgao</a> 刷新當前頁面
<a href="#" onclick="showFlag();">ssgao</a> 執行showFlag()方法,並會跳轉到頁面頂部
<a href="#" onclick="javascript:方法;return false;">提交</a>
a href="javascript:void(0)" onclick="javascript:方法;return false;"提交
javascript:void(0)就不會向上跳了:)
還有一個方法是 #this
a href="#this" onclick="javascript:方法"
target 屬性
<a> 標簽的target屬性規定在何處打開鏈接文檔
如果一個文檔標簽包含一個target屬性,瀏覽器將會載入和顯示用這個標簽的href屬性命名的,名稱與這個目標吻合的框架
或者窗口中的文檔。如果這個指定名稱或id的框架或者窗口不存在,瀏覽器將打開一個新的窗口,給這個窗口一個指定的標記
然后將新的文檔載入那個窗口。從此以后,超鏈接文檔就可以指向這個新的窗口
打開新的窗口
<ul>
<li><a href="pref.html" target="view_window">Preface</a></li>
<li><a href="chap1.html" target="view_window">Chapter 1</a></li>
<li><a href="chap2.html" target="view_window">Chapter 2</a></li>
<li><a href="chap3.html" target="view_window">Chapter 3</a></li>
</ul>
當用戶第一次選擇內容列表中的某個鏈接的時候,瀏覽器將打開一個新的窗口,將他標記為view_windoe,然后在其中顯示希望顯示的文檔內容
如果用戶從這個內容列表中選擇另一個鏈接,且這個"view_window"仍然處於打開狀態,瀏覽器就會再次將選定的文檔載入那個窗口,取代剛才的
那些文檔。
在這個過程中這個包含選擇內容列表的窗口是可以訪問的。通過單機窗口中的一個鏈接,可以使另一個窗口的也發生變化。
在框架中打開窗口
不用打開一個完成的瀏覽器窗口,使用target更通常的方法是在一個<frameset>顯示中將超鏈接內容定向一個或多個框架中。
可以將這個內容列表放入一個帶有兩個框架的文檔的一個框架中,並用這個相鄰的框架來來顯示選定的文檔:

當用戶從左邊框架中的目錄選擇一個鏈接時,瀏覽器會將這個關聯的文檔載入並顯示在右邊這個view_frame框架中。當其他鏈接
被選中時,右邊這個框架中的內容也會發生變化,而左邊這個框架始終保持不變。
特殊的目標
_blank
瀏覽器總在一個新打開,未命名的窗口中載入目標文檔
_self
這個目標的值對所有沒有指定目標的<a>標簽是默認目標。它使得目標文檔載入並顯示在相同的框架或者窗口中作為源文檔。
這個目標是多余的且不必要的,除非和文檔標題<base>標簽中的target屬性一起使用
_parent
在父框架集中打開被鏈接的文檔
_top 在整個窗口打開被鏈接文檔
framename 在指定的框架中打開被鏈接文檔
標簽a錨點設置
通俗的解釋,我們想要讓頁面跳轉到的位置,就是錨點。
錨點是一種超鏈接,只不過他是頁面內部的超鏈接,它指向頁面特定的部分。
使用id作為錨記
使用a標簽作為鏈接,使用其他元素(建議使用塊元素)作為錨記,即使用'id'定位
使用id可以針對任何標簽來定位
<a href="#mao" target="_black"> 點擊此處到目標位置</a>
<div id="mao">
</div>
從一個頁面鏈接到另外一個頁面的錨記位置
頁面1
<a href="maodian2.html#other_page" target="_blank"> </a>
頁面2
<div id="other_page">這里是另一個頁面的位置</div>
使用name作為錨記
_使用name屬性只能針對a標簽來定位,而對div等其他標簽就不能起到定位作用 _
<a href="#mao"> 點擊此處目標位置 </a>
</br>
<div>分割信息</div>
<a name="mao"> 跳轉此處位置 </a>
回到頂部或底部
使用js
$("#帶有滾動條的元素").animate({scrollTop:0},'fase'); //帶有動畫
$("#帶有滾動條的元素").scrollTop(0);//不帶動畫
scrollTop 距離滾動元素頂部的位置
使用a標簽的name屬性(錨記)
<a name="top">top</a>
<a href="#top"> 點擊此處跳轉到name=top的a標簽的位置
