CODEWITHSUNDEEP
jquery
HippoDuck
HippoDuck

Reputation: 2194

Using jQuery to add an additional parameter to the current URL without reloading the page?

A client has a page on their website with a list of staff. When a user clicks on a name, then using jQuery, a bio section on the right will fade out of the current bio, and fade in with the selected bio.

This is fine, but the issue is that they can't link to specific bio's, as it's all under the same URL.

I have the jQuery to retrieve a parameter from the URL, and show the correct bio on page load, but the problem is that I need to change/add this parameter on each staff name click, ready to be copied and pasted.

The list of the links looks like this:

<ul class="team_list">
    <li><a href="#">Staff Name 1</a></li>
    <li><a href="#">Staff Name 2</a></li>     
    <li><a href="#">Staff Name 3</a></li>
</ul>

Is it possible to do this without reloading any pages?

Upvotes: 2

Views: 114

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Use a URL fragment, aka a hash-value:

<ul class="team_list">
    <li><a href="#name1">Staff Name 1</a></li>
    <li><a href="#name2">Staff Name 2</a></li>     
    <li><a href="#name3">Staff Name 3</a></li>
</ul>

You can then use window.location.hash on load of the page to retrieve the value and display the right bio as needed.

Upvotes: 3

Related Questions