• a标签的使用


    参考:http://wenku.baidu.com/view/c7d5e8b465ce0508763213aa.html

    http://blog.163.com/wangzhenbo85@126/blog/static/1013632822012112794028742/

      a标签经常用来跳转使用,经常出现的问题罗列如下:

    问题一:点击a标签后页面会回到页面的顶部,

      原因分析:代码如下

    <a href="#" onclick="go(...);">跳转</a>

       “#”是标签内置的一个方法,代表跳转到Top的作用

      解决方案:替换“#”号为“###”,或者是在onclick中添加“rerurn false;”  改为如下代码

    <a href="###" onclick="go(...);">跳转</a>
    <a href="#" onclick="go(...);return false;">跳转</a>

    问题二:页面假死(gif动画暂停等)或者  页面触发window.onbeforeunload事件

      原因分析:代码如下

    <a href="javascript:go(...);" >跳转0</a>

      javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句

      解决方案:

    <a href="javascript:void(0);" onclick="go(...);">跳转2</a>

    问题三:获取不到event对象和window.event对象

      原因分析:代码如下

    <a href="javascript:go(...);" >跳转0</a>

    这里的go函数是获取不到event对象和window.event对象的,可能是javascript:协议和事件的机制不一样没有默认触发事件参数

      解决方案:代码如下

    <a href="javascript:void(0);" onclick="go(...);">跳转2</a> 

      用onclick事件代替href调用

    总结:

    推荐写法:

    <a href="javascript:void(0);" onclick="goUrl('http://www.baidu.com');return false;">跳转3</a>
    <a href="#" onclick="goUrl('http://www.sina.com');return false;">跳转5</a> <a href="###" onclick="goUrl('http://www.sina.com');">跳转6</a>

    有兴趣的同学可以看下我的测试代码

    测试代码如下

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>测试用</title>
    </head>
    <body>
        <div style="height: 1000px; 200px;background-color: green;"></div>
        <a href="javascript:goUrl(this);" >跳转0</a>
        <a href="javascript:;" onclick="goUrl('http://www.sina.com');">跳转1</a> 
        <a href="javascript:void(0);" onclick="goUrl('http://www.sina.com');">跳转2</a> 
        <a href="javascript:void(0);" onclick="goUrl('http://www.sina.com');return false;">跳转3</a>
        <a href="#" onclick="goUrl('http://www.sina.com');">跳转4</a>
        <a href="#" onclick="goUrl('http://www.sina.com');return false;">跳转5</a>
        <a href="###" onclick="goUrl('http://www.sina.com');">跳转6</a>
    
    <script type="text/javascript">
        function goUrl(x){     
            var e = event || window.event;
            window.location.href=x;     
        }
        window.onbeforeunload=function(){
            alert('before');
        }
    </script>
    </body>
    </html>
    希望能多多交流,欢迎指正……
  • 相关阅读:
    Win2008 Server MySql安装包详细安装教程
    ef codefirst VS里修改数据表结构后更新到数据库
    c#扩展方法
    c#异步学习笔记
    winform SerialPort串口通信问题
    委托与事件学习笔记
    泛型的优点
    c#泛型约束 (where T:class)
    .net扩展方法
    mvc5视图view不使用默认母版页
  • 原文地址:https://www.cnblogs.com/zhzhjieke/p/5310483.html
Copyright © 2020-2023  润新知