Append #hashtag to link in HTML on the fly

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?

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;
});​​​​​​​

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>

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)
  });

Try this:

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

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

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');
          });

$("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)
    });
   }
  });

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/