Question

我的帐户中有3个标签＆＃39;我网站的页面。

当你去这里时： https://mywebsitename.com/my-account/您将有3个标签可供选择。

问题在于，当您转到标签2时，它是相同的网址。

我希望如此 https://mywebsitename.com/my-account/#tab2

这是我的JS

(function($) {          
       $(document).ready(function(){

        $('ul.tabs li').click(function(){
            var tab_id = $(this).attr('data-tab');

            $('ul.tabs li').removeClass('current');
            $('.tab-content').removeClass('current');

            $(this).addClass('current');
            $("#"+tab_id).addClass('current');
        })

    })
    })(jQuery);

以下是我在wordpress functions.php文件中的内容

// The tabs in the my account page
function tabs() {
wp_enqueue_script( 'tabs', get_stylesheet_directory_uri() . '/scripts/tabs.js', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'tabs' );

任何帮助都会很棒，

谢谢

Answer 1

在JavaScript中选择选项卡时：

window.history.pushState(null, null, "newUrl");

在你的情况下：

$(document).ready(function(){


    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        // BugFix - if page is loaded without #tab_id set in URL, the attribute location.hash is empty and then the new URL gets messy. So we have to check if location.hash is present and take proper action.
        if(location.hash.length > 0)
            window.history.pushState(null, null, location.href.replace(location.hash,"#"+tab_id));
        else
            window.history.pushState(null, null, location.href+"#"+tab_id);
        // End-of-BugFix
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })

    // The following code will extract the hash part - after #, check if it is given, try to find a tab with that attribute and select it.
    var selection = window.location.hash.substr(1);
    if(selection.length > 0)
    {
        if($('ul.tabs li[data-tab="'+selection+'"]').size())
            $('ul.tabs li[data-tab="'+selection+'"]').click();
    }

});

每个标签的唯一网址

1 个答案: