Ajouter #hashtag pour lier en HTML à la volée

Question

J'ai un nav, chaque lien dans la navigation ajoute juste un hashtag sur l'URL existante quand on clique, pour le filtrage en direct, etc. avec l'utilisation de jQuery.

Je souhaite ajouter le même hashtag actuel SAME à une série de liens dans un div plus bas sur la page.

Par exemple, j'ai cliqué sur "le travail" et mon URL ressemble maintenant:

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

J'ai une série de liens dans la page:

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

Ces liens au sein de la div #Les liens doivent être mis à jour à la volée pour ajouter #work sur toutes les URL de sorte que lorsque vous cliquez dessus, le hashtag est ajouté.

Est-ce possible? Est-ce que ça a du sens?

Answer 1

Vous devriez joindre un gestionnaire d'événements click pour les liens dans #nav et changer les liens dans #links en conséquence. [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 2

Essayez ceci:

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

Answer 3

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

Answer 4

Le code jQuery ci-dessous sélectionner each<a>within<li>within le <div>with the id de links et change its href attribute être la même que sa valeur actuelle, mais avec 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 5

Vous devez utiliser livequery plugin: http://plugins.jquery.com/project/livequery et la documentation est ici http://brandonaaron.net/code/livequery/docs

edit: Recherche en direct utilise la puissance des sélecteurs jQuery par des événements de liaison ou de tir callbacks pour les éléments adaptés automatiquement par magie, même après que la page a été chargée et les DOM mis à jour

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

Answer 6

Utilisez la propriété hash des liens vers définir l'identifiant de fragment sans déconner avec le reste du href:

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

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

Jetez un oeil à cette page pour démonstration avec hasgtag, ajax et API d'histoire html http://www.amitpatil.me/create-gmail-like-app-using-html5-history-api-and-hashbang/