Javascript 在 href 属性中使用“#”的替代方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1871874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alternatives for using "#" in href attribute
提问by SpikETidE
The <a>tag is used to create hyperlinks but in this age of jQuery and Ajax we are using it to load HTML into <div>s in the same page as the <a>tags.
该<a>标签用于创建超链接，但在这个年龄段的jQuery和Ajax的，我们都用它来加载HTML到<div>S IN同一页面的<a>标签。
That said, we set the hrefatribute as href="#", using or rather abusing the #character as a placeholder along with some undesirable side effects like the URL getting appended with the #character.
也就是说，我们将href属性设置为href="#"，使用或者更确切地说滥用#字符作为占位符以及一些不受欢迎的副作用，例如附加到#字符的 URL 。
And if you leave the hrefattribute blank href = "", the link does not seem to work.
如果您将href属性留空href = ""，则链接似乎不起作用。
Is there anyway to do this in a cleaner way like showing some text or dummy function in the status bar of the browser when the user hovers over the link and yet make the link do what the programmer intended?
无论如何，当用户将鼠标悬停在链接上时，是否可以以更简洁的方式执行此操作，例如在浏览器的状态栏中显示一些文本或虚拟功能，并使链接按照程序员的意图执行？
Here's my code.
这是我的代码。
<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);
});
What else can I use instead of "#"to make my code neat..?
除了"#"使我的代码整洁之外，我还可以使用什么？
采纳答案by nickf
The best solution is to not use some dummy placeholder at all. Use a meaningful URL which, if the link were actually followed, would show you the information you'd get from the AJAX request.
最好的解决方案是根本不使用一些虚拟占位符。使用一个有意义的 URL，如果链接被实际跟踪，它将显示您从 AJAX 请求中获得的信息。
I do this regularly with my web apps, using Javascript to enhance a working site. For example, the HTML:
我经常使用我的网络应用程序执行此操作，使用 Javascript 来增强工作站点。例如，HTML：
<a href="/users/index" rel="popup">View users</a>
The Javascript (jQuery):
Javascript（jQuery）：
$('a[rel*="popup"]').click(function() {
loadPopup({ // whatever your favourite lightbox is, etc..
url: this.href
});
return false;
});
The benefits of this are numerous. Your site is accessible to screen readers, web crawlers and users with javascript off, and even those with javascript turned on will get a meaningful URL in their status bar, so they'll know where they're going.
这样做的好处是多方面的。屏幕阅读器、网络爬虫和关闭 javascript 的用户可以访问您的网站，即使那些打开 javascript 的用户也会在其状态栏中获得一个有意义的 URL，因此他们会知道他们要去哪里。
回答by Andrew Hare
I usually use this:
我通常使用这个：
href="javascript:void(0);"
Setting an anchor's hrefattribute to javascript:void(0);indicates to the browser that this anchor is not a hyperlink to another document or anchor,
将锚点的href属性设置javascript:void(0);为向浏览器表明该锚点不是指向另一个文档或锚点的超链接，
回答by Asaph
If your onclickhandler returns false, the link won't get followed by the browser. Try this:
如果您的onclick处理程序返回false，则浏览器将不会跟踪该链接。尝试这个：
<a href="#" onclick="alert('No # in the address bar!'); return false;">Click Me</a>
EDIT:
编辑：
If you're absolutely hellbent on not using the octothorpe (ie. #symbol), you don't have to. Try this:
如果您绝对不使用八索（即#符号），则不必使用。尝试这个：
<a href="" onclick="alert('No change in the address bar!'); return false;">Click Me</a>
回答by Arnis Lapsa
Why you need anything to be defined in href?
为什么需要在 href 中定义任何内容？
That's how SO works=>
这就是 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>
But - if link is supposed to actually navigate somewhere - keep normal href
and just e.preventDefault() regular behavior with jQuery.
但是 - 如果链接应该实际导航到某个地方 -
使用 jQuery保持正常的 href和 e.preventDefault() 常规行为。
回答by Justin Johnson
nickfbeat me to it; however, a few things should be mentioned. You should never use the "javascript" protocol for a link(unless maybe you intend for it to be a bookmarklet). It is the opposite of progressive enhancement. Whenever possible, the hrefattribute should be an actual URI resource so that it can gracefully degrade. In all other situations, "#" is encouraged and proper JavaScript should be used from preventing the page from scrolling to the top. There are two methods to do so. In the click handler, either prevent the default action, or return false.
nickf打败了我；然而，应该提到一些事情。 您永远不应该对链接使用“javascript”协议（除非您打算将其用作书签）。它与渐进增强相反。只要有可能，该href属性应该是一个实际的 URI 资源，以便它可以优雅地降级。在所有其他情况下，鼓励使用“#”，并且应该使用适当的 JavaScript 来防止页面滚动到顶部。有两种方法可以做到这一点。在点击处理程序中，要么阻止默认操作，要么返回 false。
$('a[rel*="popup"]').click(function(e) {
e.preventDefault();
loadPopup({url: this.href});
});
or
或者
$('a[rel*="popup"]').click(function() {
loadPopup({url: this.href});
return false;
});
回答by pawel
Maybe I don't get smething, but if there is no link, you just shouldn't use an <a /> element in the first place. Use some <span /> or attach event listeners to list elements. You can style these elements to have cursor: pointer;using CSS.
也许我不明白，但如果没有链接，你就不应该首先使用 <a /> 元素。使用一些 <span /> 或将事件侦听器附加到列表元素。您可以cursor: pointer;使用 CSS 设置这些元素的样式。
Remember that browsers have some special actions associated with links, like "open in new tab", "save target element" etc. When you use dummy href=''attribute these actions work in a broken way, so it's better to not use links at all.
请记住，浏览器有一些与链接相关的特殊操作，例如“在新选项卡中打开”、“保存目标元素”等。当您使用 dummyhref=''属性时，这些操作会以一种损坏的方式工作，因此最好根本不使用链接。
On the other hand, if you are able to render content of these ajaxified parts as normal pages (and it makes sense), follow nickf's advice.
另一方面，如果您能够将这些 ajaxified 部分的内容呈现为普通页面（这是有道理的），请遵循nickf 的建议。
回答by leepowers
I always use this:
我总是用这个：
<a href="javascript:;">Click to your heart's delight</a>
<a href="javascript:;">Click to your heart's delight</a>
回答by Jeff Rupert
Using the "#" character as a placeholder basically makes the link "active." The browser interprets it as a tag that points to something else. If href is empty, the browser will assume the a tag is just another tag.
使用“#”字符作为占位符基本上可以使链接“处于活动状态”。浏览器将其解释为指向其他内容的标记。如果 href 为空，浏览器将假定 a 标签只是另一个标签。
A way around that is to assign some CSS to a different tag that emulates the same functionality of the a tag. On hover, change the mouse, underline, change color, etc. You can easily change the window status and make it seem like the user is clicking on a link when in reality they aren't clicking a link so much as making a click event.
一种解决方法是将一些 CSS 分配给模拟 a 标签相同功能的不同标签。在悬停时，更改鼠标、下划线、更改颜色等。您可以轻松更改窗口状态，让用户看起来像是在点击链接，而实际上他们并没有点击链接，而是点击事件.
In fact, that's the better option, because running only a JS function through event binding that can't be used without JavaScript shouldn't be considered a link in the first place.
事实上，这是更好的选择，因为通过事件绑定仅运行一个 JS 函数，如果没有 JavaScript 就不能使用，首先不应将其视为链接。
