javascript - 網易雲音樂是如何實現a標籤href有值不跳轉的？

Question

例如這個頁面http://music.163.com/#/song?i...
點擊下面的歌名，頁面沒有刷新也沒跳轉，是如何實現的。

#

Answer 1

http://music.163.com/#/song?i...
#號後面的東西叫片段，也可以叫錨點。 這東西不會刷新瀏覽器，也不會提交一個請求給伺服器，但是可以產生一條瀏覽器記錄。
取得#號後面的值是window.location.hash
所以只要監控這個hash值的變化就可以了onhashchange

Answer 2

window.location.hash

Answer 3

iframe

Answer 4

估計你是新手吧... 多看原始碼吖

_onAnchorClick = function(_event){//截获所有<a>标签的点击事件，自定义页面的跳转
    _event = _event||window.event;
    var _el = _event.target||_event.srcElement,
    _base = location.protocol+'//'+location.host;
    
    while(_el&&_el!=document){
        // ...
    }

}

_addEvent(document,'click',_onAnchorClick);

---

其實就是用了 Event.preventDefault

  <a href="https://baidu.com">我想跳转到百度搜索哆啦A梦</a>


  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
  <script>
    
    $('a').on('click', function (event) {
      event.preventDefault();
    })
  
  </script>

Answer 5

頁面其實就是沒有刷新,你知道"#target",可以將你的頁面跳到target的位置,這個其實和這個差不多,進一步你可以了解js的hash(樓上說的),還有路由