在 href 属性中使用“#”的替代方法 [重复]

Question

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

也就是说，我们将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>

编辑：

如果您绝对不使用八字形（即# 符号），您不必这样做。试试这个：

<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
以及 jQuery 的 e.preventDefault() 常规行为。

Answer 5

也许我没有得到什么，但如果没有链接，你就不应该首先使用 元素。使用一些 或将事件侦听器附加到列表元素。您可以使用 CSS 将这些元素设置为具有 cursor: pointer; 的样式。

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

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

Answer 6

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 7

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

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

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

Answer 8

我总是用这个：

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