點選連結不跳轉例項程式碼

antzone發表於2017-03-15

連結<a>是用來跳轉用的，比如跳轉到某一個指定的頁面，有時候我們只想點選連結相應一些事件，並不想要跳轉效果，下面就簡單介紹一下如何實現此效果，先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<body style="padding-top:1000px;"> 
<a href="#">螞蟻部落</a>
</body>  
</html>

有些朋友可能會想到，將href屬性值設定為#號，這樣就不會跳轉到其他頁面，但是還是在本頁中有跳轉效果，上面的程式碼在點選之後依然有跳轉效果，所以這種方法不能夠滿足我們的需要，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<body style="padding-top:1000px;"> 
<a href="javascript:void(0)">螞蟻部落</a>
</body>  
</html>

以上程式碼就實現了我們的效果，點選連結之後並沒有跳轉效果。

其實消除跳轉效果的方式有很多中，這裡就不多介紹了，知道一種足矣。

相關文章