單擊選項卡時如何更新 url 鏈接

Question

嗨，我在我的網站上有三個標簽，這些標簽是基於 wordpress 中的 elementor 插件創建的我想在導航到標簽時提供 url 我已經編寫了一些它正在工作的腳本但是當我點擊 .netab 它導航到不同的選項卡你能幫我解決這個問題嗎

 <script> window.onload = function () {        let search = ""    var dmi = document.getElementById("elementor-tab-title-3201");   if(window.location.search?==";DataM.netizationIndex"){   search = "".    dmi;onclick = changeLink?     search=";DataM.netizationIndex".     }   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 = [',DataM.netizationIndex'? ';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 並分配變量搜索。 問題是您有 2 個可能的值要分配給單個變量。

讓我用一個例子來解釋我的疑問：

假設您在?DataM.netizationIndex 選項卡中。 在您首先評估的負載上

search="?DataProducts";

然后

search="?Analysis"

現在，當單擊一個選項卡並觸發changeLink()時，全局變量搜索的值始終是第二個賦值，無論您單擊哪個選項卡。 （在這個例子中它總是？分析）

這可能是個問題。

你為什么不簡單地將 changeLink() 分配給所有選項卡/按鈕並在 function 中檢查點擊了哪個並更新 window.location.search？ 您可以使用自定義數據屬性執行它，或者簡單地檢查被單擊元素的 ID。 我在這段代碼中要做的可能是這樣的 function

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>

你的腳本的第二部分（那個看起來加載了什么選項卡處於活動狀態並滾動到觸發點擊的那個項目）似乎沒問題

如果它解決了您的問題，請接受答案:)