单击选项卡时如何更新 url 链接

Question

您好，我的网站中有三个选项卡，这些选项卡是根据 WordPress 中的 elementor 插件创建的，我想在导航到选项卡时提供 url，因为我已经编写了一些正在运行的脚本，但是当我单击一个选项卡，它会导航到不同的选项卡，您可以帮我解决这个问题吗

<script>
window.onload = function () {
  
  
   let search = ""
  
 var dmi = document.getElementById("elementor-tab-title-3201");
  if(window.location.search!=="?DataMonetizationIndex"){
      search = "";
   dmi.onclick = changeLink;
    search="?DataMonetizationIndex";
 
  }

  var dp = document.getElementById("elementor-tab-title-3203");
  if(window.location.search!=="?DataProducts"){
      search = "";
   dp.onclick = changeLink;
   search="?DataProducts";
        
  }
  
  var ans = document.getElementById("elementor-tab-title-3202");
  if(window.location.search!=="?Analysis"){
      search = "";
   ans.onclick = changeLink;
   search="?Analysis";
        
  }
  
  
   function changeLink() {
     
     window.location.search=search;
        
        }
        
}



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'
];

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

Answer 1

不清楚你的问题是什么，但查看代码我认为问题可能出现在第一部分，在 window.onload = function () {...}
您检查 window.location.search 并分配变量搜索。问题是你有两个可能的值可以分配给一个变量。

让我用一个例子来解释我的疑问：

假设您位于“DataMonetizationIndex”选项卡中。
在您首先分配的负载上

search="?DataProducts";

，然后

search="?Analysis"

现在，当单击选项卡并触发 changeLink() 时，全局变量 search 的值始终是第二个分配，不不管你点击哪个选项卡。 （在这个例子中它总是？分析）

这可能是一个问题。

为什么不简单地将 changeLink() 分配给所有选项卡/按钮并在函数内部检查单击的选项并更新 window.location.search ？
您可以使用自定义数据属性来执行它，或者简单地检查单击元素的 ID。
我在这段代码中要做的可能是这样的函数，

function changeLink2(){
        var idClicked = $(this).id

        switch (idClicked){
            case "elementor-tab-title-3201":
                 window.location.search = "?DataMonetizationIndex"
                break;
            case "elementor-tab-title-3203":
                 window.location.search = "?DataProducts"
                break;
            case "elementor-tab-title-3202":
                 window.location.search = "?Analysis"
                break;
        }

    }

这将适用于任意数量的选项卡，并且很容易实现未来的更改。

更新

应用于您的代码，可能是这样的

<script >
    window.onload = function() {


        //let search = ""

        var dmi = document.getElementById("elementor-tab-title-3201");
        /*if (window.location.search !== "?DataMonetizationIndex") {
            search = "";
            dmi.onclick = changeLink;
            search = "?DataMonetizationIndex";
        }*/
        dmi.onclick = changeLink;

        var dp = document.getElementById("elementor-tab-title-3203");
        /*if (window.location.search !== "?DataProducts") {
            search = "";
            dp.onclick = changeLink;
            search = "?DataProducts";

        }*/
        dp.onclick = changeLink;

        var ans = document.getElementById("elementor-tab-title-3202");
        /*if (window.location.search !== "?Analysis") {
            search = "";
            ans.onclick = changeLink;
            search = "?Analysis";

        }*/
        ans.onclick = changeLink

        function changeLink() {

            //window.location.search = search;

            var idClicked = $(this).id

            switch (idClicked){
                case "elementor-tab-title-3201":
                     window.location.search = "?DataMonetizationIndex"
                    break;
                case "elementor-tab-title-3203":
                     window.location.search = "?DataProducts"
                    break;
                case "elementor-tab-title-3202":
                     window.location.search = "?Analysis"
                    break;
            }
        }


    }



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'
            ];

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

脚本的第二部分（查看加载哪个选项卡处于活动状态并滚动到触发单击的该项目的部分）似乎可以，

如果它解决了您的问题，请接受答案:)