zoukankan      html  css  js  c++  java
  • a标签中的javascript:;是什么

    a标签中的javascript:;是什么

    一、问题

    <a>标签中href="javascript:;"表示什么意思??

    <a id="jsPswEdit" class="set-item" href="javascript:;">修改密码</a> 
    有一种说法是:href="javascript:;"会去解析<script></script>里面的代码,跟当前<a>标签有关的就会执行,.没关的就跳过。
    是不是这样理解呢?

    二、解答

    1、

    <a> 标签的 href 属性用于指定超链接目标的 URL,href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段

    这里的href="javascript:;",其中javascript:是伪协议,它可以让我们通过一个链接来调用javascript函数.而采用这个方式 javascript:;可以实现A标签的点击事件运行时,如果页面内容很多,有滚动条时,页面不会乱跳,用户体验更好。

    2、

    javascript: 是一个伪协议,其他的伪协议还有 mail:  tel:  file:  等等。

    1
    <a id="jsPswEdit" class="set-item" href="javascript:;">修改密码</a>

    javascript:是表示在触发<a>默认动作时,执行一段JavaScript代码,而 javascript:; 表示什么都不执行,这样点击<a>时就没有任何反应。

    一般在这种情况下,会给<a>绑定一个事件回调,来执行业务,如:

    1
    2
    3
    4
    document.getElementById('jsPswEdit').addEventListener('click'function(e) {
      e.preventDefault();
      // 当<a>触发click时,处理业务
    }, false);
    我能不能这样理解:href="javascript:;"就是去掉a标签的默认行为,跟href="javascript:void(0)"是一样的?
    是一样的,
    void 是JavaScript 的一个运算符,void(0)就是什么都不做的意思

    3、

    简单来说,"javascript:"是另外一种嵌套js代码在网页中的方法
    跟通过<script></script>标签嵌套js代码差不多

    如点击下面链接会会执行"javascript:"后面的内容。不过不推荐这种写法。
    理由是使用<a>标签href属性通常是保存超链接,用来控制页面转向

    1
    <a href = "javascript:alert(22);">点我</a>

    三、实例

    1、a标签中的javascript:;实现列表下拉

    <a href="javascript:;" class="nav-link tpl-left-nav-link-list">

    2、javascript:;实现页面跳转

    1 <button type="button" tooltip="添加栏目" class="btn btn-sm btn-azure btn-addon" onClick="javascript:window.location.href = '{:url('cate/add')}'"> <i class="fa fa-plus"></i> Add
    2 </button>
    
    
  • 相关阅读:
    2017-5-2 对话框控件
    2017-4-28 ListView控件
    2017-4-27 WinForm 布局及容器控件
    jQuery与Aiax应用
    jQuery中的动画
    jQuery中的事件
    jQuery中的DOM操作
    认识jQuery
    h5
    js动画效果
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/8949276.html
Copyright © 2011-2022 走看看