将 #hashtag 动态附加到 HTML 中的链接

Question

我有一个导航，导航中的每个链接只是在单击时在现有 URL 上附加一个主题标签，以便使用 jQuery 进行实时过滤等。

我想将相同的当前主题标签附加到页面下方 div 内的一系列链接。

例如，我单击了“work”，我的 URL 现在如下所示：

http://www.domain.com/page.html#work

我的页面中有一系列链接：

<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>

div#links 中的这些链接需要动态更新以在所有 URL 上附加 #work，因此单击时会附加主题标签。

这可能吗？这有道理吗？

Answer 1

使用链接的 hash 属性来设置片段标识符，而不会弄乱 href 的其余部分：

$('#links a').each(function() {
    this.hash= location.hash;
});​​​​​​​

Answer 2

您应该为 #nav 中的链接附加一个 click 事件处理程序，并相应地更改 #links 中的链接。 [查看实际操作]

Javascript

$("#nav a").click(function() {
  $("#links a").each(function() {
    this.href = this.href.split("#")[0] + "#" + window.location.hash;
  });
});​

HTML

<div id="nav">  
  <a href="#work">work</a> - 
  <a href="#school">school</a>
</div>

Answer 3

下面的 jQuery 代码将选择 each 内

使用 links 的 id 并更改其href 属性与其当前值相同，但具有当前值的哈希值附加到它的页面。

$("div#links li a").each(
  function(index, element){
     $(this).attr('href',$(this).attr('href') + window.location.hash)
  });

Answer 4

试试这个：

$(function() {
    $('#links a').each(function() {
        $(this).attr('href', $(this).attr('href')+'#work');
    });​​​​​​​
});

Answer 5

$('#links li a').each(function()
{
    $(this).attr('href', '#' + $(this).html());
});

Answer 6

您应该使用 livequery 插件： http://plugins.jquery.com/project/livequery 和文档在这里 http://brandonaaron.net/code/livequery/docs

编辑：
Live Query 通过绑定事件或自动触发匹配元素的回调来利用 jQuery 选择器的强大功能，即使在页面加载且 DOM 更新之后也是如此

 $("#links a").livequery('click',function(event) {
                 $(this).attr('href', $(this).attr('href')+'#work');
          });

Answer 7

$("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)
    });
   }
  });

Answer 8

请查看此页面，了解带有 hasgtag、ajax 和 html 历史 API 的完整演示 http://www.amitpatil.me/create-gmail-like-app-using-html5-history-api-and-hashbang/