2

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

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

例如，我点击了“工作”，我的 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，以便在单击时附加主题标签。

这可能吗？这有意义吗？

4

8 回答 8

4

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

$('#links a').each(function() {
    this.hash= location.hash;
});​​​​​​​
于 2010-10-07T19:18:21.810 回答
2

下面的 jQuery 代码将选择id内的每个 ，并将其 href 属性更改为与其当前值相同，但附加当前页面的哈希值。<a> <li> <div> links

$("div#links li a").each(
  function(index, element){
     $(this).attr('href',$(this).attr('href') + window.location.hash)
  });
于 2010-10-07T19:08:19.233 回答
2

您应该为链接附加一个click事件处理程序#nav并相应地更改链接#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>
于 2010-10-07T19:09:16.627 回答
1

试试这个：

$(function() {
    $('#links a').each(function() {
        $(this).attr('href', $(this).attr('href')+'#work');
    });​​​​​​​
});
于 2010-10-07T19:05:46.837 回答
0 
$('#links li a').each(function()
{
    $(this).attr('href', '#' + $(this).html());
});
于 2010-10-07T19:05:48.437 回答
0

您应该使用 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');
          });
于 2010-10-07T19:16:48.583 回答
0 
$("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)
    });
   }
  });
于 2010-10-07T19:20:41.387 回答
0

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

于 2012-02-14T06:44:54.243 回答