a標籤裡面巢狀一個a標籤,點選子連結標籤時,同時觸發了父標籤a
情景還原:
html生成的原始碼:
<a href="main.aspx?type=navTwo&stuNo=19&navName=電子資源" style="font-size: 16px;">電子資源
<b style="background: url(http://localhost:58596/images/LS/right.png);"></b>
<div class="c1-child" style="display: block; left: 124px; color: rgb(0, 0, 0);">
<span onclick="redict('41','電子資源')" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255);">資料庫</span>
<span onclick="redict('40','電子資源')" style="color: rgb(0, 0, 0); background: rgb(255, 255, 255);">試用資料庫</span>
<span onclick="redict('39','電子資源')">自建特色資料庫</span>
</div>
</a>
span點選觸發事件:
function redict(id, name) {
//接下來使用js程式碼進行頁面跳轉
window.location.href = "main.aspx?type=nav&stuNo=" + id + "&navName=" + name;
}
當點選span內的標籤時會觸發a標籤的href 導致跳轉連結不正確
解決辦法:
js新增event.preventDefault();
阻止預設事件.比如當你點選帶有href值的a標籤時,元素響應click事件後,還會發生頁面跳轉.如果加上這個方法(屬性)後,瀏覽器只會響應click事件,不會發生跳轉.
更改js:
function redict(id, name) {
event.preventDefault();
//接下來使用js程式碼進行頁面跳轉
window.location.href = "main.aspx?type=nav&stuNo=" + id + "&navName=" + name;
}
相關文章
- html中常用的標籤-超連結標籤HTML
- HTML標籤巢狀規則HTML巢狀
- 在<a>標籤中直接傳遞引數時,多個<a>標籤在點選時會衝突
- properties標籤和typeAliases標籤
- HTML標籤(基本標籤的使用)HTML
- 自定義標籤【迭代標籤】薦
- java <%!%>標籤和<%%>標籤的使用Java
- Html 標籤的巢狀規則HTML巢狀
- html標籤的巢狀規則HTML巢狀
- C#裡面超連結標籤的使用C#
- JSP簡單標籤標籤庫開發JS
- VOC標籤轉化為YOLO標籤YOLO
- html中常用的標籤-表格標籤HTML
- HTML簡介,結構,標籤以及標籤語義HTML
- html中常用的標籤-表單標籤HTML
- HTML常用基礎標籤:圖片與超連結標籤全解!HTML
- Git 標籤Git
- HTML <a> 標籤HTML
- script標籤
- HTML 標籤HTML
- HTML 標籤HTML
- html標籤HTML
- canvas標籤clock(時鐘)案例Canvas
- 常用標籤總結
- meta標籤總結
- HTML5新標籤或改動標籤HTML
- HTML標記之a標籤HTML
- 通過JavaScript獲取標籤,修改標籤內容JavaScript
- HTML <var> 標籤HTML
- HTML <canvas> 標籤HTMLCanvas
- HTML <article> 標籤HTML
- HTML <section> 標籤HTML
- HTML <main> 標籤HTMLAI
- HTML <time> 標籤HTML
- html標籤整理HTML
- HTML <footer> 標籤HTML
- HTML <nav> 標籤HTML
- HTML <body>標籤HTML