如何在不刷新整個頁面的情況下更改鏈接

Question

嗨，我有一個網頁，它是使用 wordpress 中的 Elementor 插件設計的。 其中有 4 個選項卡，我編寫了一些腳本，用於在單擊選項卡時更改 url。 現在的問題是，當我單擊任何選項卡時，它正在刷新頁面我不想刷新頁面我只需要更改選項卡並根據選項卡更改 url

網站鏈接： https ://yourdataconnect.com/company/caterpillar-inc/

點擊鏈接，您可以看到 4 個標簽 1) 數據貨幣化指數 2) 分析 3) 數據產品 4) 數據管理支出

<script>
window.onload = function () {
  
   var dmi_12 = document.getElementById("elementor-tab-title-1841");
  if(window.location.search!=="?DataMonetizationIndex"){
    dmi_12.onclick = link;
    function  link(){
       window.location.search="?DataMonetizationIndex"
    }
  }
  var ans = document.getElementById("elementor-tab-title-1842");
  if(window.location.search!=="?Analysis"){
    ans.onclick = link;
    function  link(){
       window.location.search="?Analysis"
    }
  }
    var dp = document.getElementById("elementor-tab-title-1843");
  if(window.location.search!=="?DataProducts"){
    dp.onclick = link;
    function  link(){
       window.location.search="?DataProducts"
    }
           
 }
   var dme = document.getElementById("elementor-tab-title-1844");
  if(window.location.search!=="?DataManagementSpend"){
    dme.onclick = link;
    function  link(){
       window.location.search="?DataManagementSpend"
    }
  }
}
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {

jQuery(function($){

let desktoptitles = $('.elementor-tab-desktop-title');
let mobiletitles = $('.elementor-tab-mobile-title');

let strings = ['?DataMonetizationIndex',
'?Analysis','?DataProducts','?DataManagementSpend'
];

strings.forEach( (string,i) => {
if (window.location.href.indexOf(string) > -1) {
desktoptitles.eq(i).click();
mobiletitles.eq(i).click();
$('html, body')
} } );
}); }, 1200); });
</script>

你能幫我解決這個問題嗎

Answer 1

您可以從 history-api 仔細查看 pushState 。 在那里，您可以簡單地添加一個新的歷史條目，而無需重新加載頁面。 對於您的場景，查詢參數更改的示例可能是最有趣的。

const url = new URL(window.location);
url.searchParams.set('foo', 'bar');
window.history.pushState({}, '', url);