在web頁面開發時,我們常會遇到下列情況:
1.一個標籤僅是要觸發onclick行為;
2.表現上要有滑鼠的pointer指標顯示,或其他類似a標籤的視覺效果。
例如執行刪除操作時,為了避免誤操作,我們要彈出對話框讓使用者確定是否刪除。因此我們常用連結形式來取代
程式碼如下:
<script type="text/javascript"> function del(){ if(confirm("确定删除该记录?")){ parent.window.location="执行删除.jsp"; return true; } return false; } </script> <a href="" target="mainFrame" onclick="del()" >删除</a>
這樣做的後果是js程式碼會跳到"執行刪除.jsp"頁面,而標籤也會跳到開啟一個空白頁面。因為html本身對 標籤的href屬性做了處理,所以就會先執行我們自己定義的方法,接著再運行它自身的方法(跳轉的方法)。
解決方法主要有四種,如下:
1. 不用a標籤,設定css或用js來表現(有點複雜);
2. 用a標籤,onclick屬性或onclick事件中返回false ;(個人喜歡)
如:刪除
這是個執行順序的問題,這個標籤的執行順序應該是先執行onclick 的腳本,而最後才進行href參數指定頁面的跳躍。在onclick中回傳false,就可以中止標籤的工作流程,也就是不讓頁面跳到href參數指定的頁面。
3. 用href="javascript:void(0)"這種偽協議;(這種偽協議,少寫的好)
即:刪除
4. 刪除。 (總是跳到當前頁面頂部,當頁面內容較多時,還是會有跳轉的感覺)
其他知識:
下面的代碼創建了一個超級鏈接,用戶單時會提交表單。 單此處提交表單
a標籤中href ="#"中的#是錨點的意思 也可以認為是當前頁面
下面是錨的使用方法:
<!-- 定义一个锚。 --> <a name="anchor">锚点</a> <!-- 本页面的一个连接,连接到锚: --> <a href="#anchor">锚</a>
效果是:點擊錨就轉到了錨點段落。