javascript 将#hashtag 附加到 HTML 中的动态链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3884949/
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
Append #hashtag to link in HTML on the fly
提问by Robert E
I have a nav, each link in the nav just appends a hashtag on the existing URL when clicked, for live filtering, etc. with the use of jQuery.
我有一个导航，导航中的每个链接只是在单击时在现有 URL 上附加一个主题标签，用于实时过滤等，使用 jQuery。
I want to append the SAME current hashtag to a series of links within a div further down the page.
我想将 SAME 当前主题标签附加到页面下方 div 中的一系列链接。
For example, I've clicked "work" and my URL now looks like:
例如，我点击了“工作”，我的 URL 现在看起来像：
http://www.domain.com/page.html#work
I have a series of links in the page:
我在页面中有一系列链接：
<div id="links">
<ul>
<li><a href="http://www.domain.com/link1">Link1</a></li>
<li><a href="http://www.domain.com/link2">Link2</a></li>
<li><a href="http://www.domain.com/link3">Link3</a></li>
<li><a href="http://www.domain.com/link4">Link4</a></li>
</ul>
</div>
These links within the div#links need to be updated on the fly to append #work on all the URL's so that when clicked the hashtag is appended.
div#links 中的这些链接需要即时更新以在所有 URL 上附加 #work，以便在单击时附加主题标签。
Is this possible? Does this make sense?
这可能吗？这有意义吗？
采纳答案by gblazex
You should attach a clickevent handler for links in #navand change links in #linksaccordingly. [See it in action]
您应该click为链接附加一个事件处理程序#nav并相应地更改链接#links。[看到它在行动]
Javascript
Javascript
$("#nav a").click(function() {
$("#links a").each(function() {
this.href = this.href.split("#")[0] + "#" + window.location.hash;
});
});?
HTML
HTML
<div id="nav">
<a href="#work">work</a> -
<a href="#school">school</a>
</div>
回答by bobince
Use the hashproperty of links to set the fragment identifier without messing around with the rest of the href:
使用hash链接的属性来设置片段标识符，而不会弄乱其余部分href：
$('#links a').each(function() {
this.hash= location.hash;
});???????
回答by Adam
The jQuery code below will select each<a>within<li>withinthe <div>with the idof linksand change its href attributeto be the same as its current value but with the hash of the current page appended to it.
jQuery代码下面将选择每个<a>内<li>内的<div>与该ID的links并改变其href属性是相同的作为其当前值但具有附加到它的当前页面的散列。
$("div#links li a").each(
function(index, element){
$(this).attr('href',$(this).attr('href') + window.location.hash)
});
回答by chigley
Try this:
试试这个：
$(function() {
$('#links a').each(function() {
$(this).attr('href', $(this).attr('href')+'#work');
});???????
});
回答by jps
$('#links li a').each(function()
{
$(this).attr('href', '#' + $(this).html());
});
回答by jknair
You should use livequery plugin : http://plugins.jquery.com/project/livequeryand the documentation is here http://brandonaaron.net/code/livequery/docs
您应该使用 livequery 插件：http: //plugins.jquery.com/project/livequery和文档在这里http://brandonaaron.net/code/livequery/docs
edit: Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated
编辑：Live Query 通过自动绑定事件或触发匹配元素的回调来利用 jQuery 选择器的强大功能，即使在页面已加载和 DOM 更新之后
$("#links a").livequery('click',function(event) {
$(this).attr('href', $(this).attr('href')+'#work');
});
回答by Plaudit Design
$("a[href]").click(function(){
var href = $(this).attr('href');
var ind = href.indexOf('#');
if ( ind != -1 ) {
var hash = href.substring(ind+1);
$("div#links li a").each(function() {
var myHref = $(this).attr('href');
var myInd = myHref('#');
if ( myInd != -1 ) {
myHref = myHref.substring(0, myInd);
}
$(this).attr('href', myHref + hash)
});
}
});
回答by www.amitpatil.me
Take a look at this page for complete demo with hasgtag,ajax and html history API http://www.amitpatil.me/create-gmail-like-app-using-html5-history-api-and-hashbang/
查看此页面以获取带有 hasgtag、ajax 和 html 历史 API 的完整演示http://www.amitpatil.me/create-gmail-like-app-using-html5-history-api-and-hashbang/
