CODEWITHSUNDEEP
javascripthtml
user3014233
user3014233

Reputation:

Link #id without page change location?

How to use #id links in HTML only for change the page link bar without change page vertical location?

http://example.com/#link

Upvotes: 3

Views: 333

Answers (2)

Billy
Billy

Reputation: 2448

Quick example as I'm lying in bed now, you could have an empty div an populate that with the html of the content div, this is an unstylish but quick example, you could hide the linked div and have the script cycle through the divs to reshow it when another is clicked etc etc but I'm off to sleep now. Night night

var links=document.getElementsByTagName('a');

for(var i=0;i<links.length;i++){
  links[i].addEventListener('click',clickFunc);
  
  
  }

function clickFunc(e){
    e.preventDefault();
   var thisId=this.getAttributeNode("data-id").value; 
   var inner=document.getElementById(thisId).innerHTML;
   document.getElementById('mainDiv').innerHTML=inner;
  
  }
menu{position:fixed;top:0px;border:1px solid red;z-index:100;}
div{position:relative;margin-top:50px;}
<menu><a href="#part1" data-id="part1">part 1</a><a href="#part2" data-id="part2">part 2</a><a href="#part3" data-id="part3">part 3</a></menu>
<div id="mainDiv"></div>
<div id="part1"  >part1<br>shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) shona bhlian duit (happy new year in Irish) </div>

<div id="part2">part2<br>part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2)part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2)part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2part2)</div>


<div id="part3">part3<br>part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3partpart3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3partpart3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3partpart3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3partpart3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3part3</div>

Upvotes: 0

user1717828
user1717828

Reputation: 7225

The # sign is an anchor, and if there exists a named anchor that matches your link, the page will "change vertical location" there.

If you just want to change the URL in the location bar, without using anything except HTML, try using an anchor that doesn't have a matching link:

Like this.

Upvotes: 0

Related Questions