href="#" 的坑

第一次发博客, 也不讲究样式。 只是单纯的说一下踩过的坑,方便后人避坑吧

之前做项目的时候,碰到一个非常奇葩的问题。 就是在jqgrid中写了了一个简单的方法

{name:'已经存在的列名称', 
                  label:'操作',
                  formatter:function(cellvalue, options, row)
                  {
                      var rowId = "'"+row.id+"'";
                      return  '<a href="#" onclick="lookImg('+rowId+')">查看流程图</a>'
                                  +'&nbsp;&nbsp;<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

  

 

第一次写博客,希望读者可以多多支持,让我有勇气继续写一下,转载也请标注一下 谢谢

 

posted @ 2017-03-27 11:41  leader_Hoo  阅读(327)  评论(0编辑  收藏  举报