Javascript UIkit：将切换器选项卡设置为当前窗口哈希

我在这里要求更多的观众——这是没有记录的

将UIkit中的制表符切换程序用于我的登录表单。这是标记：

当窗口哈希为“帮助”时，我需要将活动选项卡设置为“帮助”选项卡。我似乎只完成了一部分，包括以下几点：

if（window.location.hash='#help'）{
UIkit.switcher（$（'[dataukswitcher]'））.show（$（'li#help'））；
}

但我在某个地方遗漏了一步，因为现在我无法返回到“新会话”选项卡

上面的方法如何覆盖内置行为？如果是这样，方法显然是不正确的-在这种情况下，正确的方法是什么？

我的解决方案是：

1.创建html代码

<ul class="uk-tab" data-uk-tab="{connect:'#tab-content', hash: true}">
    <li><a href="#tab-profile">Профиль</a></li>
    <li><a href="#tab-verify">Подтверждение телефона</a></li>
    <li><a href="#tab-access">Изменить пароль</a></li>
</ul>

<ul class="uk-switcher uk-margin-medium-top" id="tab-content">
    <li>i am tab-profile</li>
    <li>i am tab-verify</li>
    <li>i am tab-access</li>
</ul>

3.通过哈希激活活动选项卡。向swticher组件添加一些代码

UI.component('switcher', {
    init: function() {
        // init active tab by hash
        if(document.location.hash.match(/^#?tab/gi)) {
            UIkit.$("[href="+document.location.hash+"]").parents("li").addClass("uk-active");
        }
        ...
    },
    ...
});

Uikit v.2.26.4。示例：

我的版本

JS

HTML

内容1
内容2

同时，我正在使用

active

属性，根据

选项卡设置它。尽管如此，我还是希望恢复到所需的行为。我试图使用
active
属性：
data-uk-switcher=“{connect:'#tabs'，active:1}”
。只是个主意。我还没有甜甜圈。如果您正在使用某个框架，您可以尝试这样做：
var index=window.location.hash
和
{active:{{index}}}
您应该提交一个pull请求，而不是直接编辑UIKit。
UI.component('switcher', {
    init: function() {
        // init active tab by hash
        if(document.location.hash.match(/^#?tab/gi)) {
            UIkit.$("[href="+document.location.hash+"]").parents("li").addClass("uk-active");
        }
        ...
    },
    ...
});

switcherTab('uk-tab-administration');

function switcherTab(id){
    $('#'+id+' a[href = "'+window.location.hash+'"]').parent('li').click();

    $('#'+id+' a').click(function(){
        var val = $(this).attr('href');
        window.location.hash = val.replace("#", "");
    });
}

<ul uk-tab id="uk-tab-administration">
    <li><a href="#item1">Item 1</a></li>
    <li><a href="#item2">Item 2</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li>content1</li>
    <li>content2</li>
</ul>