href="#" 的坑
第一次发博客, 也不讲究样式。 只是单纯的说一下踩过的坑,方便后人避坑吧
之前做项目的时候,碰到一个非常奇葩的问题。 就是在jqgrid中写了了一个简单的方法
{name:'已经存在的列名称',
label:'操作',
formatter:function(cellvalue, options, row)
{
var rowId = "'"+row.id+"'";
return '<a href="#" onclick="lookImg('+rowId+')">查看流程图</a>'
+' <a href="#" onclick="lookDiagram('+rowId+')">查看diagram</a>';
}
}
很简单点击事件,但是每次点击的时候 都会产生一个很奇怪的问题。 就是页面会整体的向上平移。把我上部的tab栏给覆盖了
简单说一下我的页面布局

格式采用的iframe设计
当我在下部标签栏的iframe页面中,点击的时候,会将上部标签栏和下部标签栏全部挤掉页面整体向上
后来解决方法:
将href="#"替换为href="javascript:void()" 即可解决
再说一下 两者的区别
1:#"包含了一个位置信息,默认的锚点是#top 也就是网页的上端
2:javascript:void(0) 仅仅表示一个死链接
3: onclick事件会比 href属性先执行,所以会先触发 onclick 然后触发href
总结一下 :
1:单纯的想要跳转到一个新的页面 : 直接写href="页面地址"
2:想要写一个脚本方法 最好 href="javascript:void(0)",避免样式发生奇怪的变化
3:想要实现位置的变化,比如tab标签 可以 href = "#"+id
至于具体的语法,可以参考楼下连接
参考于http://www.jb51.net/article/34156.htm
第一次写博客,希望读者可以多多支持,让我有勇气继续写一下,转载也请标注一下 谢谢
href="#" 的坑的更多相关文章
- selenium+xpath获取href的坑
先上HTML文档 <html> <body> <a href="http://www.example.com">Example</a> ...
- html中a标签href属性的一个坑
由于公司需要,小菜最近在搞app web开发,目前只有ios和android版本,虽然仅此两个版本,但是依然要考虑浏览器兼容性问题,因为android和ios默认浏览器内核是不一样的. 先说说兼容性问 ...
- [vue--开发记录]使用location.href修改地址跳转页面在ie上遇到的坑
管理后台项目上在用vue2.0开发,因为刚转vue2.0,不是太熟悉.在跳转页面的时候直接用location.href来修改地址跳转,在chrome和火狐上展现都是正常的.后面因为说要兼容到IE9,就 ...
- 曾经遇到的坑------href="#"和href="javascript:void(0);"、href="javascript:;"
这个是为了 在点击此链接后回到页首,如果你写href="#"那么点击后会回到页首,这样影响操作. <a href="javascript:void 0" ...
- 使用h5 <a>标签 href='url' download 下载踩过的坑
用户点击下载多媒体文件(图片/视频等),最简单的方式: <a href='url' download="filename.ext">下载</a> 如果url ...
- selenium又一小坑 无法用XPATH直接获取属性值 需要使用.get_attribute(“href”)
在使用selenium进行抓取url的时候,试图使用find_elements_by_xpath来获取. 因此想当然的直接使用XPATH的语法进行获取属性 事例缩略后xml结构如下 <div c ...
- vue项目中关于微信分享的坑,以及安卓和ios获取location.href不同的处理
最近做vue项目的微信公众号项目,涉及到微信分享,记录一下心得,以备后用,vue路由用的是hash模式: 该项目只是公众号里面的h5链接,不需要获取code获取access_token的票据,因此前端 ...
- 关于window.location.href页面跳转的坑
"window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...
- 踩坑系列《四》a标签的href属性拼接问题
如上所示,无法直接在 html里面的 a 标签的href属性传递参数时,只需要在 JS 中获取对应 a 标签的id,再通过 attr 方法抓到 href,进行字符串拼接即可
随机推荐
- linux开发常用命令
最近经常查看服务器上的log文件,有时log文件太大查起来很不方便,看了看网上说可以部分查询,就先记录一下吧 Linux中查看部分文件内容命令head,tail,sed的用法: Linux中的查看文件 ...
- 数据库表间多对多关系(附带额外字段)的实体类(POJO 或 POCO)表示
介绍 在之前的 Entity Framework 快速上手介绍 之中,两个实体之间只是简单的一对一关系,而在实际的应用场景中,还会出现多对多关系,同时还有可能会出现多对多关系还附带有其他字段的情况. ...
- win2012中添加架构FTP服务器
打开IIS管理器(win+R输入inetmgr后回车或通过 添加FTP站点
- <bits/stdc++.h>头文件介绍(包含源代码)
注:转自http://blog.csdn.net/charles_dong2/article/details/56909347,同为本人写的,有部分修改. 之前在一个小OJ上刷题时发现有人是这么写的: ...
- JavaSE教程-02Java基本语法-思维导图
思维导图看不清楚时: 1)可以将图片另存为图片,保存在本地来查看 2)右击在新标签中打开放大查看 1.注释 定义:用于解释说明程序作用的文字 注释类别 单行注释 格式: //注释文字 多行注释 格式: ...
- opencv 删除二值化图像中面积较小的连通域
对于上图的二值化图像,要去除左下角和右上角的噪点,方法:使用opencv去掉黑色面积较小的连通域. 代码 CvSeq* contour = NULL; double minarea = 100.0; ...
- 关于Atlassian无法注册的问题,请看过来
好多童鞋在用团队构建工具git的时候,必然用到git的可视化工具sourceTree来管理项目一些操作,那么当我们下载完sourTree的时候,会有一个选择,已有账户登录还是免费账户,免费账户只有三十 ...
- cpp(第四章)
1.索引比数组长度少1: 2.c++中不能数组赋给另一个数组:只能定义时才能使用初始化: 3.c++11中{}内为空,默认赋值为0,而c++中{}如果只对部分初始化,其他部分将被设置为0:c++11使 ...
- Java经典编程题50道之五十
有五个学生,每个学生有3门课的成绩,从键盘输入以上数据(包括学生号,姓名,三门课成绩),计算出平均成绩,况原有的数据和计算出的平均分数存放在磁盘文件 "stud"中. public ...
- Java基础——关于访问权限的一道例题
一.回顾访问修饰符 ==public:被它修饰的类,属性,方法,不仅可以跨类访问,而且可以跨包(package)访问 ==private:可以修饰数据成员,构造方法,方法,不能修饰类,被它修饰的成员只 ...