javascript - 網易云音樂是如何實現a標簽href有值不跳轉的?
問題描述
比如這個頁面http://music.163.com/#/song?i...點擊下面的歌名,頁面沒有刷新也沒跳轉,是如何實現的。
問題解答
回答1:http://music.163.com/#/song?i...#號后面的東西叫片段,也可以叫錨點。 這東西不會刷新瀏覽器,也不會提交一個請求給服務器,但是可以生成一條瀏覽器記錄。獲取#號后面的值是window.location.hash所以只需要監控這個hash值的變化就可以了onhashchange
回答2:window.location.hash
回答3:iframe
回答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 >我想跳轉到百度搜索哆啦A夢</a> <script src='https://code.jquery.com/jquery-3.1.0.js'></script> <script>$(’a’).on(’click’, function (event) { event.preventDefault(); }) </script>回答5:
頁面其實就是沒有刷新,你知道'#target',可以將你的頁面跳轉到target的位置,這個其實和這個差不多,進一步你可以了解js的hash(樓上說的),還有路由
相關文章:
1. javascript - vue-cli創建的項目,少一些步驟,對項目有影響嗎?2. 在mac下出現了兩個docker環境3. android - Python代碼轉為java代碼?4. 如何解決Centos下Docker服務啟動無響應,且輸入docker命令無響應?5. css3 實現一個線性漸變出現的問題?6. angular.js - angular內容過長展開收起效果7. css3 - css怎么實現圖片環繞的效果8. javascript - 一個是數組,一個是對象,怎么進行比較去重?9. css - div外層有一圈白色10. css - vue.js的vue單文件組件style中的scoped屬性無效
