如何在不刷新整个页面的情况下更改链接

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);