Append #hashtag to link in HTML on the fly

Question

I have a nav, each link in the nav just appends a hashtag on the existing URL when clicked, for live filtering, etc. with the use of jQuery.

I want to append the SAME current hashtag to a series of links within a div further down the page.

For example, I've clicked "work" and my URL now looks like:

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

I have a series of links in the 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>

These links within the div#links need to be updated on the fly to append #work on all the URL's so that when clicked the hashtag is appended.

Is this possible? Does this make sense?

Answer 1

You should attach a click event handler for links in #nav and change links in #links accordingly. [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

Use the hash property of links to set the fragment identifier without messing around with the rest of the href:

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

Answer 3

The jQuery code below will select each <a> within <li> within the <div> with the id of links and change its href attribute to be the same as its current value but with 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 4

Try this:

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