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

Question

标签用于创建超链接，但在 jQuery 和 Ajax 的时代，我们使用它将 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);
});

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

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 的用户也会在状态栏中获得有意义的 URL，以便他们知道自己要去哪里。

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的工作原理=>

<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

也许我不明白，但如果没有链接，你就不应该使用 元素放在首位。使用一些>或将事件侦听器附加到列表元素。您可以使用 CSS 将这些元素设置为 cursor:pointer;。

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

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

Answer 6

nickf 打败了我；然而，有几件事值得一提。 您永远不应该对链接使用“javascript”协议（除非您打算这样做）成为一个书签）。它与渐进增强相反。只要有可能，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 7

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

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

事实上，这是更好的选择，因为通过事件绑定仅运行一个没有 JavaScript 就无法使用的 JS 函数，一开始就不应该被视为链接。

Answer 8

我总是使用这个：

Click to your heart's pleasure