call a div from a href tag but in the same time make it appear in the address bar link

Question

i will try to explain very simple:

I'm calling a div trough a href tag like this:

<a href="#injectie" class="doua-randuri">Injectie</a>

 <div id="injectie">
<p>some text</p>
  </div>

It's working well but I need to achieve this thing: let's say my link of the page is www.example.com . i would want that when i click the link to call the div the url of my page will change in something like this:

www.example.com/#injectie but without leaving the page. The way I made it it only calls the div but without changing the url. Is there a way to make this happen?

when I click on that link the div is getting displayed in the same page... — Rares Biris, Jul 03 '15 at 14:18
I'm very confused here. Isn't what he's trying to do the default behaviour of anchors? Or is the div hidden? — Shilly, Jul 03 '15 at 14:27

score 2 · Answer 1 · edited May 23 '17 at 11:58

2

What you could do is put the page url into the link, instead of only the anchor's ID.

<a href="../thispage.html#injectie" class="doua-randuri">Injectie</a>

<div id="injectie">
    <p>some text</p>
</div>

Since you don't want your page to reload, this question might be helpful: Modify the URL without reloading the page

edited May 23 '17 at 11:58

Community

1
1

answered Jul 03 '15 at 14:34

Juan Menendez

21
4

Sri Tirupathi Raju · Accepted Answer · 2015-07-03T14:26:06.460

1

Yes instead you need to use scroll to function available in Jquery which will not change the URL but scrolls to the element you want.

.scrollTo( target, options, [, complete] )
Ex:$('body').scrollTo('#injectie');

to change the url without reload use this

function processAjaxData(response, urlPath){
     document.getElementById("content").innerHTML = response.html;
     document.title = response.pageTitle;
     window.history.pushState({"html":response.html,"pageTitle":response.pageTitle},"", "www.example.com/injectie");
 }

edited Jul 03 '15 at 14:26

answered Jul 03 '15 at 14:18

Sri Tirupathi Raju

779
4
14

but i need to change the url..when i click on the link I would want to show : www.example.com/#injectie – Rares Biris Jul 03 '15 at 14:19
so now Igot the question it can easily be acheived in modern browsers using window.history.pushState("object or string", "Title", "/new-url"); but will wotk only in browsers which support html5 – Sri Tirupathi Raju Jul 03 '15 at 14:24

score 0 · Answer 3 · edited May 23 '17 at 11:43

It's not possible to change the whole url to another website without loading this website directly for serious security reasons.
Spoofing the actual website you are on would be way too easy and fisher would cerebrate a huge blowout.

You only can change your url behind the # without triggering a website reload on the client side.

And if you find a way to do the impossible nonetheless i wouldn't be surprised if you get a bounty from the affected browser company. ;)

Edit:
as Tirupathi Raju pointed out its possible to change the html5 browser history so you can change everything after the domain/ip eg. http://example.com/<here you could fiddle around>

call a div from a href tag but in the same time make it appear in the address bar link

3 Answers3