Adding hash tag to current URL using JQuery

Question

On my page I have 3 tabs setup using this code along with some CSS

<ul class="subnav" id="subnav">
    <li class="active"><a href="#subover">Overview</a></li>
    <li><a href="#subnews">News</a></li>
    <li><a href="#subgallery">Gallery</a></li>
    </ul>

Inside the news Tab, I'm using .load to fill it from page arc.php and id=news.

 <div class="subcont" id="subnews">
   <script>
jQuery(document).ready(function ($) {
$('#subnews').append($('<div>').load('arc.php #news'));
});
</script> 
   </div>

On the arc.php page, I have news descriptions with links to the articles. When the article link is clicked. I want it to load into the subnews div. I'm doing that with this.

<script>  

 jQuery(document).ready(function ($) {

$("#subnews").on("click", "a", function (e) { 
    $("#subnews").load($(this).attr("href"));
    e.preventDefault();
});
 });
</script>

Now my problem...

When the news article is loaded, the url is not changed, so I'm not able to use back to get back to the news article list.

I do have code tracking hash tags, and it works when I change from Overview, News, and Gallery. I can use back to go back through the tabs.

Is there a way to add a hash tag to the url when the article is clicked in order to use tracking and be able to click back?

David Thomas · Accepted Answer · 2013-06-11 19:50:49Z

5

I'd suggest:

$("#subnews").on("click", "a", function (e) {
    var href = $(this).attr('href');
    $("#subnews").load(href);
    window.location.hash = href;
    e.preventDefault();
});

But I can't see any reason to use $(this).attr('href'), and would personally use, instead:

$("#subnews").on("click", "a", function (e) {
    var href = this.href;
    $("#subnews").load(href);
    window.location.hash = href;
    e.preventDefault();
});

References:

window.location API.

answered Jun 11, 2013 at 19:50

David Thomas

254k53 gold badges382 silver badges421 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andrew Tillman Over a year ago

this works great for adding a hash. The back button still doesn't work though. I'm guessing it's because the div content is being emptied and replaced and there is nothing to do back to. Is there a work around for this? or another way to go about this?

Collectives™ on Stack Overflow

Adding hash tag to current URL using JQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related