相当于锚href的javascript

Question

Let's say my webpage is http://localhost/myApp/route/index.html

if I click on:

  <li><a href="#secondpage">go to second page</a></li>

It will change the route to http://localhost/myApp/route/index.html#/secondpage without reloading.

Now I'm trying to do the same thing but with just onclick and javascript instead of anchor tag. Because I need to do something first before I let angular router change to another template.

  <li><a onClick="myFunction()">Payroll Run History</a></li>

  myFunction(){
      [... do stuff ...]
      //change to http://localhost/myApp/route/index.html#/secondpage   without reloading page
  }

Answer 1

设置锚属性：

location.hash = "#/secondpage";

Answer 2

First of all, don't use onclick attribute, browsers and pop-up blockers don't like it. Give an ID to your element and create an event listener in JavaScript.

 document.getElementById('my_link').addEventListener("click", function(event) { // Prevent defualt action of event: event.preventDefault(); // Do your extra stuff here... location.hash = event.target.getAttribute('href').substr(1); }); 

 <a href="#/secondpage" id="my_link">Click here</a> 

Answer 3

If you are looking to navigate to a second page instead of a section of a page..you can use window.location

here is an example

 document.getElementById('click').onclick=function(){ var div=document.createElement('div'); div.innerHTML='I just append this div before changing my location'; document.body.appendChild(div); window.location='http://www.google.com'; } 

 #click:hover{ cursor:pointer; } 

 <li id='click'>Click here</li> 

You will notice I added a div to the body tag and then change my location....

Answer 4

window.location.hash = "secondpage";

它将在URL中设置#secondpage ，并将滚动到该ID。