Question

我有一个导航，导航中的每个链接都会在点击时在现有网址上附加一个主题标签，使用jQuery进行实时过滤等。

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

例如，我点击了“工作”，我的网址现在看起来像：

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＃链接中的这些链接需要动态更新，以便在所有URL上附加#work，以便在单击时附加主题标签。

这可能吗？这有意义吗？

Answer 1

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

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

Answer 2

下面的jQuery代码将选择each <a> within <li> within <div> with the id links }和change its href attribute与当前值相同，但the hash of the current page appended to it。

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

Answer 3

您应为click中的链接附加#nav事件处理程序，并相应地更改#links中的链接。的 [See it in action]

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

使用hashtag，ajax和html历史记录API http://www.amitpatil.me/create-gmail-like-app-using-html5-history-api-and-hashbang/

查看此页面以获取完整演示

将#hashtag附加到HTML中即时链接

8 个答案: