Добавить #hashtag для ссылки в HTML на лету

Question

У меня есть навигация, каждая ссылка в навигации просто добавляет хештег к существующему 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 # должны быть обновлены на лету, чтобы добавить #work ко всем URL-адресам, чтобы при нажатии добавлялся хэштег.

Это возможно?Имеет ли это смысл?

Answer 1

Используйте свойство ссылок hash, чтобы установить идентификатор фрагмента, не возиться с остальными href:

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

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

Answer 3

Код jQuery ниже выберет каждый <a> в <li> в <div> с идентификатором links и изменяют свой атрибут 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

Посмотрите на эту страницу полную демонстрацию с API hashtag, ajax и html history http://www.amitpatil.me/create-gmail-like-app-using-html5-history-api-and-hashbang/

Answer 6

$("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 7

Вы должны использовать плагин 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 8

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