Question

可能重复：
Href for Javascript links: “#” or “javascript:void(0)”?

<a>标记用于创建超链接，但在这个jQuery和Ajax时代，我们使用它将HTML加载到与<div>标记相同的页面中的<a>。

也就是说，我们将href属性设置为href="#"，使用或者更确切地滥用#字符作为占位符以及一些不良副作用，例如URL附加了{ {1}}角色。

如果您将#属性留空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); });来使我的代码整洁......？

Answer 1

最好的解决方案是根本不使用一些虚拟占位符。使用有意义的URL，如果实际遵循链接，将显示您从AJAX请求获得的信息。

我定期使用我的网络应用程序，使用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的用户也可以在状态栏中获得有意义的网址，这样他们就可以知道他们的去向。

Answer 2

我通常使用它：

href="javascript:void(0);"

将锚点href属性设置为javascript:void(0);表示该锚点不是指向其他文档或锚点的超链接，

Answer 3

如果您的onclick处理程序返回false，则浏览器不会跟随该链接。试试这个：

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

编辑：

如果你绝对不使用octothorpe（即#符号），那么你不必这样做。试试这个：

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

Answer 4

为什么你需要在href中定义任何东西？

SO的工作原理=＆gt;

<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
并且只是e.preventDefault（）使用jQuery的常规行为。

Answer 5

nickf打败了我;但是，应该提到一些事情。 You should never use the "javascript" protocol for a link（除非您打算将它作为书签）。它与渐进增强相反。只要有可能，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;
});

Answer 6

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

一种方法是将一些CSS分配给模拟a标签相同功能的不同标签。在悬停时，更改鼠标，下划线，更改颜色等。您可以轻松更改窗口状态，使其看起来像用户点击链接，实际上他们没有点击链接，就像点击事件一样

事实上，这是更好的选择，因为在没有JavaScript的情况下通过事件绑定仅运行JS函数不应该被认为是第一个链接。

Answer 7

我总是使用这个：

<a href="javascript:;">Click to your heart's delight</a>

Answer 8

也许我没有弄脏，但如果没有链接，你就不应该使用＆lt; a /＆gt;元素首先。使用一些＆lt; span /＆gt;或将事件侦听器附加到列表元素。您可以使用CSS设置cursor: pointer;这些元素的样式。

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

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

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

8 个答案: