javascript - 网易云音乐是如何实现a标签href有值不跳转的?
扔个三星炸死你
扔个三星炸死你 2017-07-05 10:56:54
0
5
1038

比如这个页面http://music.163.com/#/song?i...
点击下面的歌名,页面没有刷新也没跳转,是如何实现的。

扔个三星炸死你
扔个三星炸死你

全部回复(5)
为情所困

http://music.163.com/#/song?i...
#号后面的东西叫片段,也可以叫锚点。 这东西不会刷新浏览器,也不会提交一个请求给服务器,但是可以生成一条浏览器记录。
获取#号后面的值是window.location.hash
所以只需要监控这个hash值的变化就可以了onhashchange

Peter_Zhu

window.location.hash

给我你的怀抱

iframe

某草草

估计你是新手吧... 多看源代码吖


_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>
过去多啦不再A梦

页面其实就是没有刷新,你知道"#target",可以将你的页面跳转到target的位置,这个其实和这个差不多,进一步你可以了解js的hash(楼上说的),还有路由

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板