`

a标签的href属性中的"#"与"javascript:;"的区别

 
阅读更多

众所周知,a标签的最重要功能是实现超链接和锚点。而且,大多数人认为a标签最重要的作用是实现超链接。

其中,a标签内最重要的属性莫过于href了。那么关于href两者之间又有什么区别的呢?今天我们就来探讨一下!

首先我们接触较多的是

 

<a href="javascript:;"></a>
    <a href="#"></a>

 这两种写法。这两种写法到底有什么不同呢?用哪种来写更加规范呢?

 

将href="#"是指联接到当前页面,其实是无意义的,页面也不会刷新。这是一个锚链接。

在制作网页时html语言里的参数,用于指定链接的url ####就是本页链接,href="地址"就是链接到地址 链接本页面 默认本页,不弹出新窗口,空连接时,如果去掉#,则不显示鼠标手型光标。 通俗一点就是 一个 指向本页的假链接 也可以在#后面跟上锚点id 这个实际上是一个书签的另一种用法。

语法:<a href="#书签的名称">链接的文字</a>
链接到不同页面的书签
语法:<a href="链接文件的地址#书签名称">链接的文字</a> (注意引号和#号)
正常情况下点击:<a href="#书签名称">链接的文字</a>这个链接,则光标会自动跳转到本页面的:<a name="书签名称">文字</a>的位置。

如果我们只是想写成一个没有任何事件跳转发生的a标签。我个人并不推荐用<a href="#">这种写法。

但是href这个属性同样可以识别javascript代码段。

其中javascript:  是一个伪协议。它可以让我们通过一个链接来调用javascript函数。但是由于这个函数为空,所以我们调用的就是一个空函数,并不会发生任何实质性的改变。同时可以实现a标签的点击运行。如果当页面里面的内容很多的时候,有了上下滚动条,使用href=“#"会发生跳转到页面顶部的问题。而使用href="javascript:;" 就可以避免页面的乱跳!

所以,如果我们想要写一个死的a标签,使用

 

<a href="javascript:;"></a>

会更有利于增加我们的页面的用户友好度!

 

 

 

2
0
分享到:
评论
1 楼 godlewis 2016-11-26  
用href="#this"就不会乱跳了

相关推荐

    js页面跳转 多种javascript页面中转方法

    该方法与`window.location.href`类似,用于设置或返回当前窗口的位置(URL)。这里的`self`对象等同于`window`对象。 #### 应用场景: - **通用页面跳转**:适用于大多数情况下需要跳转至新页面的需求。 - **更新...

    a标签跳转到指定div,jquery添加和移除class属性的实现方法

    如果使用a标签跳转到指定的div区域,则只需要把a标签的href属性设置为“#divId”就好了,比如: &lt;a&gt;跳转到div&lt;/a&gt; 这里是被跳转的区域 第二个,使用jquery添加或者移除class属性 也很简单,使用jquery的方法...

    a href=javascript void(0) 是什么意思呢?加不加上有什么区别?.docx

    #### 三、`a href="#"` 与 `a href="javascript:void(0)"`的区别 1. **`#` 的含义**:在`a`标签中,`href="#"`通常表示链接到当前页面内的某个位置(通过ID锚点实现)。当没有指定具体ID时,点击该链接会使页面滚动...

    Web应用安全:href属性与src属性的XSS.pptx

    href属性与src属性的XSS 4 src属性的XSS 3 src属性 2 href属性的XSS 1 href属性 目录 herf属性 href是Hypertext Reference的缩写。 意思是指定超链接目标的URL。 href 属性的值可以是任何有效文档的相对或绝对URL,...

    javascript;与javascriptvoid(0)使用介绍

    这种方式常用于直接在HTML元素(如`&lt;a&gt;`标签)的`href`属性中执行JavaScript代码。 **基本用法:** ```html &lt;a href="javascript:alert('Hello World!');"&gt;点击我&lt;/a&gt; ``` 这段代码会在用户点击链接时弹出一个包含...

    55个网页编程经典技巧

    根据给定的信息,本文将对“55个网页编程经典技巧”中提到的部分技术进行详细的解释与分析。这些技巧主要集中在HTML与JavaScript上,旨在帮助开发者实现特定功能或提升用户体验。 ### 彻底屏蔽鼠标右键 #### 实现...

    JavaScript中最常用的55个技巧

    根据给定的文件信息,以下是对“JavaScript中最常用的55个技巧”中提及的部分知识点的详细解析: ### 技巧1:屏蔽鼠标右键 ```html oncontextmenu="window.event.returnValue=false" ``` 或者针对表格元素: ```...

    40种javascript小技巧

    &lt;a href="javascript:if(confirm('确实要删除吗?')) location='boos.asp?&areyou=删除&page=1'"&gt;删除&lt;/a&gt; ``` #### 技巧13:获取元素的绝对位置 可以通过遍历元素及其父级的`offsetTop`和`offsetLeft`属性来计算一...

    JavaJavaScript网页设计活学活用300问源文件-013

    1. **HTML元素**:通过`&lt;a&gt;`标签创建一个链接,其`href`属性指向一个JavaScript代码块。 2. **JavaScript代码**:`window.external.AddFavorite(url, title)`函数允许用户将当前页面添加到浏览器收藏夹中,其中`url`...

    动态更改A标签的HREF,防止打开外部连接时被浏览器拦截

    总之,动态更改`&lt;a&gt;`标签的`href`属性是一种常见的前端技术,它结合了JavaScript和jQuery的强大功能,使得网页能够灵活地响应用户交互和服务器数据。在C#和.NET框架中,你可以通过后端服务支持这种动态性。同时,...

    商城代码javascript:void(0);

    `作为`&lt;a&gt;`标签的`href`属性值,这样点击链接时不会发生页面跳转。 - 触发事件:可以结合其他JavaScript代码来触发事件处理函数,比如弹出对话框、改变页面元素状态等。 ### 给定文件的部分内容解析 #### 内容...

    a标签中调用js中的方法的方法

    综上所述,虽然有多种方式可以在`&lt;a&gt;`标签中调用JavaScript方法,但推荐使用`&lt;a href="javascript:void(0);" onclick="js_method();&gt;`或`&lt;a href="javascript:;" onclick="js_method();&gt;`,它们兼顾了代码简洁性、...

    js中 javascript-void(0) 用法详解.docx

    例如,在 AJAX 调用之前或之后执行某些逻辑处理时,可以通过设置 `&lt;a&gt;` 标签的 `href` 属性为 `javascript:void(0)` 来避免不必要的页面跳转或刷新。 #### 六、总结 - **`void(0)`** 主要用于执行某些处理,同时...

    网页设计常用的Javascript特效代码

    根据提供的文件信息,我们可以归纳出一系列与网页设计中常用的JavaScript特效相关的知识点。下面将详细介绍这些知识点,以便更好地理解和应用。 ### 网页设计中常用的JavaScript特效代码 #### 1. 文本缩放功能 在...

    Javascript中最常用的55个经典技巧

    ### JavaScript中最常用的55个经典技巧详解 #### 技巧一:禁用右键菜单 在网页开发过程中,有时为了防止用户随意复制页面内容或查看源代码,会使用以下代码来禁用浏览器的右键菜单功能: ```html ``` 或者对特定...

    40种网页常用小技巧(javascript).doc

    根据给定文件的部分内容,我们可以总结出一系列与网页开发,特别是JavaScript相关的实用技巧。下面将对这些技巧进行详细的解释和扩展: ### 技巧1:屏蔽鼠标右键 使用`oncontextmenu`事件处理程序可以阻止用户在...

    Javascript中最常用的55个经典技巧 .txt

    ### JavaScript中最常用的55个经典技巧 #### 技巧1:禁用右键菜单 - **代码示例**: ```html (false)"&gt; &lt;td&gt;no ``` - **说明**:通过在`&lt;body&gt;`或`&lt;table&gt;`标签上添加`oncontextmenu`事件,可以阻止浏览器...

    常用的JS代码

    &lt;a href="/" onClick="javascript: window.close(); return false;"&gt;关闭当前窗口&lt;/a&gt; 打印页面" onclick="document.all.WebBrowser.ExecWB(6, 1)"&gt; &lt;object classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" ...

    常用的40个网站制作技巧

    `&lt;link rel="Bookmark" href="favicon.ico"&gt;`这一标签用于设置浏览器书签中的图标,使得网站在用户的书签列表中更加显眼。 ### 技巧7:禁用IME输入法模式 `&lt;input style="ime-mode:disabled"&gt;`这一属性可以禁用...

    Javascript中最常用的55个经典技巧(1-40) 绝对经典

    &lt;a href="javascript:if(confirm('确定要删除?')) location='boos.asp?&areyou=删除&page=1'"&gt;删除&lt;/a&gt; ``` 使用JavaScript的`confirm()`函数弹出提示框询问用户是否确实想要执行删除操作。如果用户点击“确定”,则...

Global site tag (gtag.js) - Google Analytics