Step 1:
Create any .html or .aspx page what ever your wish.
<div>
<a href=”Product.html?id=1″ onclick=”Show();”>Product 1</a>
<a href=”Product.html?id=2″ onclick=”Show();”>Product 2</a>
<a href=”Product.html?id=3″ onclick=”Show();”>Product 3</a>
<a href=”Product.html?id=4″ onclick=”Show();”>Product 4</a>
</div>
Step 2:
Now Just write the below script in the head part your task is complete.
here 2 functions are used one is to get the Query String parameters and Show() is used to rewrite the URL.
<script type=”text/javascript”>
//This is the method to get the query string parameters.
var urlParams = {};
(function() {
var match,
pl = /\+/g,
search = /([^&=]+)=?([^&]*)/g,
decode = function(s) { return decodeURIComponent(s.replace(pl, ” “)); },
query = window.location.search.substring(1);
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();
//This is the method to rewrite the URL.
function Show() {
var productID = parseInt(urlParams[“id”]);
history.pushState(“Product.html?id=1”, “page product”, “Product.html?id=” + productID + “”);
}
</script>
