在href属性中使用“＃”的替代方法

Question

<a>标签用于创建超链接，但在jQuery和Ajax时代，我们使用它来在同一页中的<div>中加载HTML。

话虽如此，我们将href属性设置为href="#"，使用或者滥用#字符作为占位符，带来了一些不良副作用，比如URL末尾添加了#字符。

如果你将href属性留空，href = ""，链接似乎就不能工作。

有没有一种更简洁的方式来做到这一点，例如在用户悬停在链接上时在浏览器的状态栏中显示一些文本或虚拟函数，并使链接实现程序员预期的功能？

下面是我的代码:

<ul id="sidebarmenu1">
   // List that is converted into a menu... 
   <li> <a href="#" id="loadHotel" > HOTEL </a> </li>
   <li> <a href="#" id="loadCountry"> COUNTRY </a> </li>
   <li> <a href="#" id="loadCity"> CITY </a> </li>
</ul>

// The jQuery to load content into another div with Ajax
var loadUrl = "createHotel.php";
$("#loadHotel").click(function() {
    $("#mainContent").html(ajax_load).load(loadUrl);
}); 

// ajax function to load hotel ---> rooms page 

var url_loadRooms = "viewRooms.php";
$("#createRooms").click(function() {
    $("#mainContent").html(ajax_load).load(url_loadRooms);
});

除了 "#" 以外，我还可以使用什么来让我的代码整洁..?

- SpikETidE

---

另一件可以做的事情是不显示链接悬停时将调用的实际JS函数，而是在状态栏中显示一些文本... - SpikETidE

@SpikETidE：根据您对给出答案的评论，我认为您有更具体的要求。您可能想要在帖子中添加并明确说明为什么/如何“void(0)”方法对您无效。 - o.k.w

已添加参考代码... - SpikETidE

Answer 1

最好的解决方案是根本不使用虚拟占位符。使用一个有意义的URL，如果链接实际上被访问，将会显示你从AJAX请求中获取到的信息。

我经常在我的Web应用程序中这样做，使用Javascript增强工作站点。例如，HTML：

<a href="/users/index" rel="popup">View users</a>

Javascript代码（jQuery）：

$('a[rel*="popup"]').click(function() {
    loadPopup({    // whatever your favourite lightbox is, etc..
        url: this.href
    });
    return false;
});

这样做的好处很多。您的网站可以被屏幕阅读器、网络爬虫和关闭了JavaScript的用户访问，即使开启了JavaScript的用户也会在状态栏中获得有意义的URL，从而知道他们要去哪里。

这样做的好处很多。您的网站可以被屏幕阅读器、网络爬虫和关闭了JavaScript的用户访问，即使开启了JavaScript的用户也会在状态栏中获得有意义的URL，从而知道他们要去哪里。

- nickf

---

它可以工作，但如果您尝试在https://validator.w3.org上验证文档，则会收到此错误：“元素a的属性rel的弹出窗口值不良：字符串弹出窗口不是已注册的关键字。” - Jaime Montoya

Answer 2

我通常使用这个：

href="javascript:void(0);"

将锚点的href属性设置为javascript:void(0);会告诉浏览器此锚点不是指向另一个文档或锚点的超链接。

- Andrew Hare

---

大多数地方都需要，但某些东西必须放在那里。 - Moshe

嗨，安德鲁...在我的情况下，当用户点击a标签时，我调用一个更高级别的ajax加载函数。使用href =“javascript:void(0)”可以使ajax调用失效，浏览器会显示“无权查看此页面”的消息。 - SpikETidE

认真点，别这么做。这里很好地总结了各种问题：http://www.jibbering.com/faq/#javascriptURI - Tim Down

但是这会导致网站管理员出现“已禁用对'javascript' URI的访问”的错误。 - Shemeer M Ali

@TimDown 返回 false（正如文章所述）甚至更糟糕。 - user3714134

Answer 3

如果您的onclick处理程序返回false，则浏览器不会跟随该链接。请尝试以下操作：

<a href="#" onclick="alert('No # in the address bar!'); return false;">Click Me</a>

编辑：

如果你绝对不想使用八角井号（即#符号），也可以不用。试试这个方法：

<a href="" onclick="alert('No change in the address bar!'); return false;">Click Me</a>

- Asaph

---

我正在寻找一种不使用"#"字符的方法... - SpikETidE

@SpikETidE：在我的示例中，将任何你想要的内容放入href属性中都可以。实际上并不重要，因为浏览器不会跟随它。 - Asaph

但是在点击事件中返回 false 不会调用 jQuery 的 .click() 函数... - SpikETidE

那么对于关闭 JavaScript 的浏览器用户怎么办？这样的用户还有很多。你应该为这些用户在 href 中设置一个有意义的备选方案。 - Tim Down

@Tim Down：实际上禁用JavaScript的互联网用户数量经常被夸大。这个数量实际上非常小，以至于Google Analytics甚至不统计这些人（它是基于JavaScript的，它怎么可能统计呢）。即使是现在的主要爬虫也支持JavaScript。无论如何，对于原始问题（#）来说，这并不代表一个有意义的备选方案。 - Asaph

Answer 4

为什么需要在href中定义任何内容？

这是SO的工作方式=>

<a id="close-question-1871874" title="closes/opens question for answering....">
  close<span title="3 more vote(s) needed to close this question"> (2)</span>
</a>

但是，如果链接实际上需要导航到某个地方，请保留正常的href，并使用jQuery仅阻止默认行为。

- Arnis Lapsa

Answer 5

nickf 比我先说了，但是还有几件事情需要提到。除非你打算将其作为书签工具,{@style=color:red}"javascript"{@style} 协议不应该用于链接。这与渐进增强的思想背道而驰。尽可能地，href 属性应该是一个实际的 URI 资源，以便它可以优雅地降级。在所有其他情况下，鼓励使用 "#" 并且应该使用适当的 JavaScript 防止页面滚动到顶部。有两种方法可以做到这一点。在单击处理程序中，要么阻止默认操作，要么返回 false。

$('a[rel*="popup"]').click(function(e) {
    e.preventDefault();
    loadPopup({url: this.href});
});

或者

$('a[rel*="popup"]').click(function() {
    loadPopup({url: this.href});
    return false;
});

- Justin Johnson

Answer 6

也许我理解有误，但如果没有链接，你就不应该在第一次使用<a />元素。可以使用一些<span />或将事件监听器附加到列表元素上。您可以使用CSS样式这些元素，使其具有cursor: pointer;。

请记住，浏览器与链接相关的一些特殊操作，如“在新标签页中打开”、“保存目标元素”等。当您使用虚拟的href=''属性时，这些操作会以错误的方式工作，因此最好根本不使用链接。

另一方面，如果您能够将这些ajax化部分的内容呈现为普通页面（并且有意义），请遵循nickf's advice的建议。

- pawel

Answer 7

使用“＃”字符作为占位符基本上使链接“活动”。浏览器将其解释为指向其他内容的标记。如果href为空，则浏览器将假定a标记只是另一个标记。

绕过这个问题的方法是将一些CSS分配给模拟a标记相同功能的不同标记。在悬停时，更改鼠标，下划线，更改颜色等。您可以轻松更改窗口状态，并使其看起来像用户单击链接，而实际上他们并没有单击链接，而是进行了单击事件。

事实上，这是更好的选择，因为仅通过事件绑定运行JS函数，如果没有JavaScript，则不应首先考虑将其视为链接。

- Jeff Rupert

---

嗨，Jeff...正如在这篇文章中指出的那样 https://dev59.com/YHVC5IYBdhLWcg3w9GLM 通过使用“javascript:void(0)”链接只能使用鼠标访问，而“a”标签可以通过键盘选项卡访问... 我希望我的也可以通过键盘访问... - SpikETidE

在这种情况下，我建议尝试编写一个按键事件绑定。此外，我认为您可以在HTML中使用taborder属性（或类似的属性）来允许用户切换到特定元素。不确定它是否适用于所有情况，我从未尝试过。在这种情况下，键盘访问的好处是什么？ - Jeff Rupert

此外，您可以将锚点指向任何类型的URL，但请确保onclick事件处理程序返回false。这将停止冒泡并且链接将永远不会被访问。但是，如果用户禁用了JavaScript，则可以使用解决方法。 - Jeff Rupert

键盘访问只是为了提高可用性...链接在菜单中使用，如果用户只能使用Tab键导航到它，那将是理想的... - SpikETidE

使用tabindex。我认为浏览器默认使用锚点和表单元素，但您可以在其中添加自己的选项。http://www.w3.org/TR/html401/interact/forms.html#h-17.11 - 这应该为您提供tabindex的快速概述，并可能有助于您的情况。一定要使用return false;来停止冒泡，这样链接就不会实际触发，只有点击事件。 - Jeff Rupert

Answer 8

我经常使用这个：

<a href="javascript:;">尽情点击</a>

- leepowers

---

这是我在使用FF 3时收到的警报...Firefox不知道如何打开此地址，因为协议（javacript）未与任何程序关联。 - SpikETidE

如果禁用了JavaScript，它是否能够工作呢？ - Jitendra Vyas

如果网站旨在禁用JavaScript，则使用jQuery没有意义。 - SpikETidE

SpikEtidE - 应该是 javascript:; 而不是 javacript:;。此外，我赞同 nickf 的答案，因为它是最优雅的解决方案。 - leepowers

唯一的解决方案是使用有意义的页面URL作为备选项。http://jibbering.com/faq/#javascriptURI - Tim Down