Aggiunge #hashtag al collegamento in HTML al volo

Question

Ho un nav, ogni anello della nav appena aggiunge un hashtag sul URL esistente se cliccata, per il filtraggio dal vivo, ecc, con l'utilizzo di jQuery.

Voglio aggiungere l'hashtag corrente SAME ad una serie di collegamenti all'interno di un div più in basso nella pagina.

Per esempio, ho cliccato "lavoro" e il mio URL ora appare come:

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

Ho una serie di link nella pagina:

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

Questi collegamenti all'interno del div # collegamenti devono essere aggiornati al volo per accodamento #work su tutta l'URL così che se cliccato l'hashtag viene aggiunto.

È possibile? Fa questo senso?

Answer 1

Si deve collegare un gestore di eventi click per i collegamenti in #nav e modificare i collegamenti in #links di conseguenza. [ vederlo in azione ]

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 2

Utilizzare la proprietà hash di link per impostare l'identificatore di frammento, senza fare in giro con il resto della href:

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

Answer 3

Il codice jQuery sotto selezionerà ogni <a> entro <li> entro il <div> con la id links e modificare l'attributo href essere lo stesso come il suo valore attuale ma con l'hash della pagina corrente allegato ad esso .

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

Answer 4

Prova questo:

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

You should use livequery plugin : http://plugins.jquery.com/project/livequery and the documentation is here 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

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

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/