52

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

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

我还能用什么来代替"#"使我的代码整洁..？

4

8 回答 8

45

最好的解决方案是根本不使用一些虚拟占位符。使用有意义的 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，这样他们就会知道他们要去哪里。

于 2009-12-09T06:45:28.050 回答
20

我通常使用这个：

href="javascript:void(0);"

将锚的href属性设置javascript:void(0);为向浏览器表明该锚不是指向另一个文档或锚的超链接，

于 2009-12-09T06:04:51.943 回答
8

如果您的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>
于 2009-12-09T06:19:52.317 回答
3

为什么需要在 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() 常规行为。

于 2009-12-09T09:42:40.553 回答
1

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

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

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

于 2009-12-09T09:32:39.150 回答
1

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;
});
于 2009-12-09T10:51:39.473 回答
0

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

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

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

于 2009-12-09T06:11:39.383 回答
0

我总是用这个：

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

于 2009-12-09T06:23:17.663 回答