簡介

Elementor Pro的Post文章元素工具雖可以列出指定類型的文章列表,但點擊在其「文章列表分頁」時會重新載入該分頁的頁面,所以有些候想要點擊分頁時讓頁面不重新載入,以讓頁面不會跳動,增加閱讀舒適感。

運用範圍

只要是Elementor Pro 的Post工具都可以套用此法,我自己常運用在首頁有最新公告僅列出5則公告時,若想看更多的歷史公告,就可以用此法讓人點擊分頁時,首頁可不用重新載入就能把更多則公告載入進來。

範例

下方的文章列表,請點擊下方的「分頁」,測試一下網頁是否可以不用重新載入就能切換不同的分頁了。

▼這是經處理過的Elementor Post,點擊分頁時不會重新載入頁面。

如果上面範例有異常,可以點此另看一個範例

點擊分頁時會停個1~3秒才出新的分頁內容,主要是它在重新以ajax方式重新索取資料,而這1~3秒主要取決於主機的回應速度。

▼以下是未經處理過的Elementor Post,點擊分頁時會重新載入頁面

原理與思路

要實現這樣的效果有很多種,例如可以靠「篩選器」的插件來組合出這樣的功能(即ajax載入),而本篇主要講述不靠其它擴充外掛的方式,僅使用jQuery的「 load()方法」來達成這樣的效果,如果不懂load()方法沒關係,程式碼照貼就會有效果了。

實作

付費內容,需支付 : 900 個學習幣
您須先登入會員以使用學習幣與發問功能。

總結

這個做法主要是不靠外掛或不需太進階的程式技術來達成目的,如果無法接受這樣的方式,請勿購買此篇教學。