超链接<a>标签和javascript:void(0)

本文介绍了在网页开发中如何处理链接的点击事件,避免点击后页面滚动到顶部的问题,并提供了多种解决方案,包括使用不同的href属性值及结合JavaScript的方法。
最近看了好几个关于<a>标签和javascript:void(0)的帖子,谨记于此,以资查阅。
注:以下代码未经全面测试,但每一种方法可能会出现的情况都基本做了说明。

在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好。

目前有如下几种解决办法:
1)点击链接后不做任何事情
1.<a href="javascript:void(0);" >test</a>
2.<a href="javascript:;" >test</a>
3.<a href="####" >test</a> //使用2个到4个#,见的大多是"####",也有使用"#all"等其他的

2)点击链接后,响应用户自定义的点击事件
1.<a href="javascript:void(0)" onclick="doSomething()">test</a>
2.<a href="#" onclick="doSomething();return false;">什么问题都解决了,包括浏览器不兼容问题</a> //或者直接使用href=""
3.<a href="#" onclick="alert();event.returnValue=false;">test</a>

说明:
1.javascript:void(0)这种伪协议,少写的好,如果你看过一些web标准的书就知道为什么了。(不懂,原话摘的,暂做记录)
2.链接(href)直接使用javascript:void(0)在IE中可能会引起一些问题,比如:造成gif动画停止播放等,所以,最安全的办法还是使用“####”。为防止点击链接后跳转到页首,onclick事件return false即可。
3.如果仅仅是想鼠标移过,变成手形,可以使用
<span style="cursor:pointer" onclick="foo()">Click Me!</span> 


void是javascript的操作符,意思是:只执行表达式,但没有返回值,
void 操作符用法格式如下:
1. javascript:void (expression) 
2. javascript:void expression

为了程序风格良好,建议使用第二种带上括号的
我们可以使用void操作符指定超级链接,如javascript:void(document.form.submit())。表达式会被计算但是不会在当前文档处装入任何内容,void(0)计算为0,但在JavaScript上没有任何效果,也就是说 <a href="javascript:void(0)">的效果同<a href="javascript:void(1)">的效果是一样的。
关键是只要知道void是javascipt自身的操作符,它表示的是只执行表达式,但没有返回值!

另外页面会自动调回顶端,是因为"#"默认的瞄点位置是top,所以会出现这种情况。
下列代码中点击功能模块跳转不了,请考虑使用超链接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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值