＜a href=“javascript:void(0)；＞＜/a＞跳转到错误空标签

原创 于 2022-05-09 14:07:21 发布 · 532 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #webview #linq #前端 #html5

本文探讨了如何通过修改链接样式，如添加'cursor:pointer'，优化艺术、文商、理工和医药类别页面的交互体验，确保点击响应正确无误。

错误：点击切换会导致点击跳转到错误空标签

<a href="javascript:void(0);" title="">艺术</a>
<a href="javascript:void(0);" class="hover" title="">文商</a>
<a href="javascript:void(0);" title="">理工</a>
<a href="javascript:void(0);" title="">医药</a>
<a href="javascript:void(0);" title="">艺术</a>

改为：

<a style="cursor:pointer" class="hover" title="">文商</a>
<a style="cursor:pointer" title="">理工</a>
<a style="cursor:pointer" title="">医药</a>
<a style="cursor:pointer" title="">艺术</a>

<!--style="cursor:pointer" 为显示光标小手样式-->

a链接href="javascript:void(0);"或"javascript:;"在IE6下导致js跳转失败
青青木屋
10-11 1961
原文地址：http://sjolzy.cn/a-link-hrefquotjavascriptvoid0quot-or-quotjavascriptquot-jump-in-IE6-fails-under-the-leading-js.html 经常有如下JS跳转写法：   test js location.replace()   test js location.rep
<a href="javascript:void(0)">.....</a>
匣子疯子
05-18 194
&lt;a href="javascript:void(0)"&gt;.....&lt;/a&gt;   和   &lt;a href="#"&gt;.....&lt;/a&gt;   的区别,在于... &lt;a href="#"&gt;.....&lt;/a&gt;某些情况会出现...点击后页面自动滚动到底部...
<a href="#"></a>和<a href="javascript：void(0)"></a>的区别
qq_42309685的博客
07-20 236
#包含了一个位置信息，默认的锚是#top，即页面最顶端 JavaScript：void(0),仅仅表示一个死链接。 总结：如果要想定义一个死链接，用javascript：void(0)
关于 a标签
nineteen73的专栏
04-26 507
javascript: 是一个伪协议，其他的伪协议还有 mail: tel: file: 等等。 1 修改密码 javascript:是表示在触发默认动作时，执行一段JavaScript代码，而 javascript:; 表示什么都不执行，这样点击时就没有任何反应。一般在这种情况下，会给绑定一个事件回调，来执行业务，如： 1 2 3 4 document.getElementB
阻止链接跳转(一)
ahln8797的博客
09-16 293
1. href="javascript:void(0);"含义 href=”javascript:void(0);”这个的含义是，让超链接去执行一个js函数，而不是去跳转到一个地址， 而void(0)表示一个空的方法，也就是不执行js函数。 2. 为什么要使用href="javascript:void(0);"？ javascript:是伪协议，表示url的内容通过javascript执...
<li class="dropdown"> <a href="#" class="dropbtn">新品上市 ▼</a> <ul class="dropdown-content"> <li><a href="#">量子机甲系列</a></li> <li><a href="#">高达系列</a></li> <li><a href="#">星环战甲系列</a></li> </ul> </li> <!-- 热销榜单 - 带下拉 --> <li class="dropdown"> <a href="#" class="dropbtn">热销榜单 ▼</a> <ul class="dropdown-content"> <li><a href="#">高达 RX-78</a></li> <li><a href="#">泰坦重装机甲</a></li> <li><a href="#">赛博格X-9</a></li> </ul> </li> <li><a href="#">论坛</a></li> <li><a href="#">消息</a></li> <li><a href="#">动态</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系客服</a></li> 都改为利用js文件实现跳转到各页面，取消超链接跳转
最新发布
10-31
我们要将你提供的导航菜单中 **所有 `<a>` 标签的跳转行为** 从传统的 `href` 超链接方式，改为 **完全由外部 JavaScript 文件控制页面跳转**，并取消原生超链接跳转（即不使用 `href` 实现跳转）。 --- ### ✅ ...
<li class="dropdown"> <a href="#" class="dropbtn">新品上市 ▼</a> <ul class="dropdown-content"> <li><a href="#">量子机甲系列</a></li> <li><a href="#">高达系列</a></li> <li><a href="#">星环战甲系列</a></li> </ul> </li> <!-- 热销榜单 - 带下拉 --> <li class="dropdown"> <a href="#" class="dropbtn">热销榜单 ▼</a> <ul class="dropdown-content"> <li><a href="#">高达 RX-78</a></li> <li><a href="#">泰坦重装机甲</a></li> <li><a href="#">赛博格X-9</a></li> </ul> </li> <li><a href="#">论坛</a></li> <li><a href="#">消息</a></li> <li><a href="#">动态</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系客服</a></li> 都改为利用js文件实现跳转到各页面
10-31
- 所有 `<a>` 标签不再使用 `href` 进行跳转 - 使用 JavaScript 的 `addEventListener` 绑定点击事件 - 实现跳转到对应页面（如：`new_products.html`, `bestsellers.html`, `forum.html` 等） - 保持下拉菜单功能...
<%-- Created by IntelliJ IDEA. User: vili Date: 2019/8/24 Time: 17:09 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@page isELIgnored="false" %> <!DOCTYPE html> <html> <head> <title>后台管理</title> <link rel="stylesheet" href="css/bootstrap.css"/> </head> <body> <div class="container-fluid"> <jsp:include page="header.jsp"></jsp:include> <br><br> <div class="alert alert-success" role="alert">欢迎进入叮当书城后台管理系统！</div> </div> </body> </html> <%-- Created by IntelliJ IDEA. User: vili Date: 2019/8/23 Time: 13:42 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@page isELIgnored="false" %> <!--header--> <div class="header"> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <h1 class="navbar-brand"><a href="index.action">叮当书城</a></h1> </div> <!--navbar-header--> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a href="index.action" <c:if test="${param.flag==1}">class="active"</c:if>>首页</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle <c:if test="${param.flag==2}">active</c:if>" data-toggle="dropdown">商品分类<b class="caret"></b></a> <ul class="dropdown-menu multi-column columns-2"> <li> <div class="row"> <div class="col-sm-12"> <h4>商品分类</h4> <ul class="multi-column-dropdown"> <li><a class="list" href="booktypes_list.action?pageNumber=1&btid=-1">全部系列</a></li> <c:forEach items="${bookTypes}" var="t"> <li><a class="list" href="booktypes_list.action?pageNumber=1&btid=${t.btid}">${t.btname}</a></li> </c:forEach> </ul> </div> </div> </li> </ul> </li> <li><a href="recommend_books.action?rtype=2&pageNumber=1" <c:if test="${param.flag==3 && t==2}">class="active"</c:if>>热销</a></li> <li><a href="recommend_books.action?rtype=3&pageNumber=1" <c:if test="${param.flag==3 && t==3}">class="active"</c:if>>新品</a></li> <c:choose> <c:when test="${empty user }"> <li><a href="user_register.jsp" <c:if test="${param.flag==10 }">class="active"</c:if>>注册</a></li> <li><a href="user_login.jsp" <c:if test="${param.flag==9 }">class="active"</c:if>>登录</a></li> </c:when> <c:otherwise> <li><a href="order_list.action" <c:if test="${param.flag==5 }">class="active"</c:if>>我的订单</a></li> <li><a href="user_center.jsp" <c:if test="${param.flag==4 }">class="active"</c:if>>个人中心</a></li> <li><a href="logout.action" >退出</a></li> <li><a href="admin/index.jsp" target="_blank"><c:if test="${param.flag==1 }"></c:if>后台管理</a></li> </c:otherwise> </c:choose> </ul> <!--/.navbar-collapse--> </div> <!--//navbar-header--> </nav> <div class="header-info"> <div class="header-right search-box"> <a href="javascript:;"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a> <div class="search"> <form class="navbar-form" action="search_books.action"> <input type="hidden" name="pageNumber" value="1"/> <input type="text" class="form-control" name="keyword"> <button type="submit" class="btn btn-default <c:if test="${param.flag==7 }">active</c:if>" aria-label="Left Align">搜索</button> </form> </div> </div> <div class="header-right cart"> <a href="book_cart.jsp"> <span class="glyphicon glyphicon-shopping-cart <c:if test="${param.flag==8 }">active</c:if>" aria-hidden="true"><span class="card_num"><c:choose><c:when test="${empty order}">0</c:when><c:otherwise>${order.itemMap.size()}</c:otherwise></c:choose></span></span> </a> </div> <div class="clearfix"> </div> </div> <div class="clearfix"> </div> </div> </div> <!--//header--> 使导航栏上的后台管理与后台管理页面连接，输出相关代码
06-21
因此，我们定位到原始代码中的这一行：<li><ahref="admin/index.jsp"target="_blank">后台管理</a></li>修改为：<li><ahref="${pageContext.request.contextPath}/admin/index.jsp"target="_blank">后台管理</a></li...
<template> <div> <div style="height: 60px; line-height: 60px; border-bottom: 1px solid #ccc; background-color: #0099CC"> <div style="display: flex"> <div style="width: 300px; color: #FFFFFF; font-weight: bold; text-align: center; font-size: 20px"> 农产品销售系统 </div> <div style="flex: 1; display: flex"> <div style="flex: 1"> </div> <div style="width: 500px; text-align: right; padding-right: 20px"> <span style="margin-right: 5px; color: #FFFFFF">欢迎回来，{{ user.name }}</span> <a href="javascript:void(0)" @click="router.push('/front/home')" class="infoCls">进入前台</a> <a href="javascript:void(0)" @click="router.push('/person')" class="infoCls">个人信息</a> <a href="javascript:void(0)" @click="router.push('/password')" class="infoCls">修改密码</a> <a href="javascript:void(0)" @click="logout" class="infoCls">注销</a> </div> </div> </div> </div>这段什么意思
03-08
通过 `<router-link>` 标签创建了多个可点击项，这些标签会根据用户的交互跳转到不同的路由地址，从而展示相应的视图内容。 #### 关键部分说明 - **品牌标识 (`<div class="branding">`)** 显示网站的品牌名称...
下列代码中点击功能模块跳转不了，请考虑使用超链接href生成：“<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="javax.servlet.http.HttpServletRequest"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>系统导航菜单</title> <!-- 引入EasyUI资源 --> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/easyui/themes/icon.css"> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.min.js"></script> <script type="text/javascript" src="${pageContext.request.contextPath}/easyui/jquery.easyui.min.js"></script> <style> .menu-container { padding: 5px; } .menu-title { font-weight: bold; color: #2c3e50; padding: 8px 5px; border-bottom: 1px dashed #eee; } .menu-item { margin: 3px 0; } .menu-item a { display: block; padding: 8px 5px 8px 25px; text-decoration: none; color: #34495e; transition: all 0.3s; } .menu-item a:hover { background-color: #ecf0f1; color: #3498db; } .menu-section { margin-bottom: 15px; } </style> </head> <body> <div class="easyui-accordion" data-options="fit:true,border:false"> <!-- 商品管理模块 --> <div title="商品管理" data-options="iconCls:'icon-product'" style="overflow:auto;"> <div class="menu-container"> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('商品列表','../proinfomgmt/ProInfolist.jsp')"> <span class="icon icon-list" style="display:inline-block;width:16px;"></span> 商品基本信息列表 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('商品查询','../proinfomgmt/QueryProInfoSelectVal.jsp')"> <span class="icon icon-search" style="display:inline-block;width:16px;"></span> 商品列表查询 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('商品查询','../proinfomgmt/QueryProInfo.jsp')"> <span class="icon icon-filter" style="display:inline-block;width:16px;"></span> 查询商品基本信息 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('多条件查询','../proinfomgmt/QueryProInfoMultConds.jsp')"> <span class="icon icon-advanced-search" style="display:inline-block;width:16px;"></span> 多条件查询商品 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('添加商品','../proinfomgmt/AddProInfo.jsp')"> <span class="icon icon-add" style="display:inline-block;width:16px;"></span> 添加商品基本信息 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('商品维护','../proinfomgmt/ProInfolistforModi.jsp')"> <span class="icon icon-edit" style="display:inline-block;width:16px;"></span> 修改或删除商品 </a> </div> </div> </div> <!-- 库存管理模块 --> <div title="库存管理" data-options="iconCls:'icon-inventory'" style="overflow:auto;"> <div class="menu-container"> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('库存列表','../invinfomgmt/Invinfolist.jsp')"> <span class="icon icon-list" style="display:inline-block;width:16px;"></span> 库存信息列表 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('库存查询','../invinfomgmt/QueryInvInfoMultConds.jsp')"> <span class="icon icon-search" style="display:inline-block;width:16px;"></span> 多条件查询库存 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('库存查询','../invinfomgmt/QueryInvInfoSelectVal.jsp')"> <span class="icon icon-filter" style="display:inline-block;width:16px;"></span> 库存列表查询 </a> </div> </div> </div> <!-- 入库管理模块 --> <div title="入库管理" data-options="iconCls:'icon-inbound'" style="overflow:auto;"> <div class="menu-container"> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('添加入库','../Inbinfomgmt/AddInbInfo.jsp')"> <span class="icon icon-add" style="display:inline-block;width:16px;"></span> 添加入库信息 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('入库维护','../Inbinfomgmt/InbInfolistforModi.jsp')"> <span class="icon icon-edit" style="display:inline-block;width:16px;"></span> 修改或删除入库 </a> </div> </div> </div> <!-- 出库管理模块 --> <div title="出库管理" data-options="iconCls:'icon-outbound'" style="overflow:auto;"> <div class="menu-container"> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('添加出库','../Outinfomgmt/AddOutInfo.jsp')"> <span class="icon icon-add" style="display:inline-block;width:16px;"></span> 添加出库信息 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('出库维护','../Outinfomgmt/OutInfolistforModi.jsp')"> <span class="icon icon-edit" style="display:inline-block;width:16px;"></span> 修改或删除出库 </a> </div> </div> </div> <!-- 用户管理模块（带权限控制） --> <% String operator_id = (String) request.getSession().getAttribute("user"); if ("U202340848".equals(operator_id)) { %> <div title="系统管理" data-options="iconCls:'icon-system'" style="overflow:auto;"> <div class="menu-container"> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('员工密码重置','../userinfomgmt/UserInfolistforModi_1.jsp')"> <span class="icon icon-lock" style="display:inline-block;width:16px;"></span> 员工重置密码 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('添加员工','../userinfomgmt/AddUserInfo.jsp')"> <span class="icon icon-user-add" style="display:inline-block;width:16px;"></span> 管理员添加员工 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('员工列表','../userinfomgmt/UserInfolist_1.jsp')"> <span class="icon icon-user-list" style="display:inline-block;width:16px;"></span> 管理员查看员工 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('员工维护','../userinfomgmt/UserInfolistforModi.jsp')"> <span class="icon icon-user-edit" style="display:inline-block;width:16px;"></span> 员工信息维护 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('员工查询','../userinfomgmt/QueryUserInfoSelectVal.jsp')"> <span class="icon icon-search" style="display:inline-block;width:16px;"></span> 查询员工信息 </a> </div> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('精准查询','../userinfomgmt/QueryUserInfo.jsp')"> <span class="icon icon-filter" style="display:inline-block;width:16px;"></span> 精准查询员工 </a> </div> </div> </div> <% } else { %> <div title="个人设置" data-options="iconCls:'icon-user'" style="overflow:auto;"> <div class="menu-container"> <div class="menu-item"> <a href="javascript:void(0)" onclick="addTab('密码重置','../userinfomgmt/UserInfolistforModi_1.jsp')"> <span class="icon icon-lock" style="display:inline-block;width:16px;"></span> 重置我的密码 </a> </div> </div> </div> <% } %> </div> <script> // 添加选项卡函数 function addTab(title, url){ if ($('#mainTabs').tabs('exists', title)){ $('#mainTabs').tabs('select', title); } else { $('#mainTabs').tabs('add',{ title: title, href: url, closable: true, bodyCls: 'tab-content' }); } } // 初始化手风琴菜单 $(function(){ $('.easyui-accordion').accordion(); }); </script> </body> </html> ”
07-06
<a href="javascript:void(0)" onclick="openTabOrLink(this, '商品列表', '${pageContext.request.contextPath}/proinfomgmt/ProInfolist.jsp')"> <span class="icon icon-list"></span> 商品列表 </a> </div> ...
a标签中href="#"和href="javascript:void(0);"href跳转使用详细说明
lijunling2008live的专栏
06-30 1498
js中a标签中href跳转使用详细说明
<a href="javascript:void(0)">是什么意思，与<A href="#">的区别？
老天忘了给我翅膀，于是我用梦想飞翔
12-07 254
是什么意思，与的区别？ 答：取消A的默认操作，即不打开href指向的链接。 区别：点我啊 点击链接后不会回到网页顶部 点我啊 点击后会回到网面顶部 ...
a标签中的href：JavaScript:void(0) # 等
weixin_30649859的博客
08-14 171
参考自：http://segmentfault.com/q/1010000000339082 给<a>标签增加href属性，就意味着以下事情： :link选择器可以选择到它 这个<a>标签可以获得焦点（可以通过tab按键访问到） 在浏览器的默认样式表中，有href属性的<a>标签才有cursor:pointer的效果（尤其是在低版本的IE上）。 ...
href="javascript void(0)"的含义，href="javascript void(0)"是什么意思，href="javascript void(0)"怎么理解
啊哈嗯嗯的博客
04-24 538
href="javascript:void(0) 超链接功能： 可以被点击：有蓝色样式，有下划线 点击后跳转到 href 指定的 url 想法：点击超链接后不跳转页面，即保留可被点击功能，去掉跳转功能 实现(固定写法)：href="javascript:void(0);" ...
href="#"与href="javascript:void(0)"的区别
weixin_33937778的博客
05-14 123
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。 而javascript:void(0), 仅仅表示一个死链接。 在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。 如果你要定义一个死链接请使用 javascript:void(0) 。 &lt;a href="javascript:void(0);"&gt;点我没有反应的!&lt;/a&gt; &lt;a h...
ie6中href设为javascript:void(0)页面无法提交
A2k
08-22 165
&lt; a class = "bt_3"    href = "javascript:void(0)" id = "btnSubmit1" onclick = "submitPage()" &gt; 提交 &lt;/ a &gt;    &lt;a class=
a href="javascript:void(0);"用法
gaolei_xj的专栏
12-01 826
用法简介：   &lt;a href="#"&gt; 点击链接后，页面会向上滚到页首，# 默认锚点为 #TOP &lt;a href="javascript:void(0)" onClick="window.open()"&gt; 点击链接后，页面不动，只打开链接 &lt;a href="#" onclick="javascript:return false;&quo
【整理】网站返回顶部代码
weixin_34064653的博客
07-24 194
<!------------返回顶部-----------><div id="tbox"><a id="gotop" href="javascript:void(0)"> <div>回到顶部</div> </a></div><script type="text/javasc...
大图jQuery多屏首页焦点图代码
qq_32047637的博客
10-13 1205
大图jQuery多屏首页焦点图代码  此代码内容为大图jQuery多屏首页焦点图代码，属于站长常用代码. index.html  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> 大图jQuery多屏首页焦点图代码_js代码
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值