Javascript 使用tabify jquery插件以编程方式更改选项卡

我正在使用tabify显示选项卡

我正在努力找出如何以编程方式更改选项卡

以下是一个工作示例：

---

虽然我知道使用JQuery UI选项卡可以实现这种行为，但由于一些不可避免的情况，我需要使用tabify。

您正在使用的项目似乎最近没有收到更新，它没有文档

我已经看了源代码，没有API可以直接访问选项卡

唯一的解决方案是通过观察库希望选项卡如何更改来间接进行黑客攻击：

function changeTab(name) {
    location.hash = name + '-tab';
}

---

这是有效的。

您正在使用的项目似乎最近没有收到更新，也没有文档

我已经看了源代码，没有API可以直接访问选项卡

唯一的解决方案是通过观察库希望选项卡如何更改来间接进行黑客攻击：

function changeTab(name) {
    location.hash = name + '-tab';
}

---

这是有效的。

我不确定这是否是最好的方法，但至少它是有效的。 如果我们查看tabify插件的源代码，您将看到：

function getHref(el){
    hash = $(el).find('a').attr('href');
    hash = hash.substring(0,hash.length-4);
    return hash;
}

function setActive(el){         
    $(el).addClass('active');
    $(getHref(el)).show();
    $(el).siblings('li').each(function(){
        $(this).removeClass('active');
        $(getHref(this)).hide();
    });
}

---

您可以使用类似的方法：

我不确定这是否是最好的方法，但至少它是有效的。 如果我们查看tabify插件的源代码，您将看到：

function getHref(el){
    hash = $(el).find('a').attr('href');
    hash = hash.substring(0,hash.length-4);
    return hash;
}

function setActive(el){         
    $(el).addClass('active');
    $(getHref(el)).show();
    $(el).siblings('li').each(function(){
        $(this).removeClass('active');
        $(getHref(this)).hide();
    });
}

---

您可以使用类似的方法：

这不是一个好方法，因为它几乎是自己重新实现整个库。此外，一旦对库进行了任何更改，这很可能会中断。复制粘贴总是不好的。@Denis，我确实同意复制/粘贴几乎总是不好的，但是你怎么能不依赖它而直接使用库/插件呢？你使用那个插件API。API不应该改变。实施应该改变。您依赖于实现-在类名“active”上使用“兄弟”和其他可以更改的细节。虽然这个库中没有官方的API，但我们仍然可以尝试辨别语义触发器，我已经在回答中描述过了。@Denis，同意。但是从概念上讲，我的解决方案中的单行

location.hash='usage tab'

和两个函数都取决于插件的内部实现。如果您在很多地方使用该行，而下一个插件版本突然删除或更改了-tab后缀，该怎么办？因此，不管怎样，单行hack还是两个函数都应该封装在一个地方。这样，当下一个tabify版本发布时，我们只需要修改那个地方。我并不认为你的解决方案更短，更容易修改，因此更好。但是我同意有一种方法可以完全不依赖。你完全正确，创建一个helper函数是绝对必要的，我并不是要直接在任何地方使用

location.hash

。除此之外，我发现tabify的更新不太可能改变它对

location.hash的使用，更可能的是它会稍微改变它的内部HTML结构。但总而言之，我们完全同意你的观点。这不是一个好方法，因为它几乎是自己重新实现整个库。此外，一旦对库进行了任何更改，这很可能会中断。复制粘贴总是不好的。@Denis，我确实同意复制/粘贴几乎总是不好的，但是你怎么能不依赖它而直接使用库/插件呢？你使用那个插件API。API不应该改变。实施应该改变。您依赖于实现-在类名“active”上使用“兄弟”和其他可以更改的细节。虽然这个库中没有官方的API，但我们仍然可以尝试辨别语义触发器，我已经在回答中描述过了。@Denis，同意。但是从概念上讲，我的解决方案中的单行
location.hash='usage tab'
和两个函数都取决于插件的内部实现。如果您在很多地方使用该行，而下一个插件版本突然删除或更改了-tab后缀，该怎么办？因此，不管怎样，单行hack还是两个函数都应该封装在一个地方。这样，当下一个tabify版本发布时，我们只需要修改那个地方。我并不认为你的解决方案更短，更容易修改，因此更好。但是我同意有一种方法可以完全不依赖。你完全正确，创建一个helper函数是绝对必要的，我并不是要直接在任何地方使用
location.hash
。除此之外，我发现tabify的更新不太可能改变它对
location.hash的使用，更可能的是它会稍微改变它的内部HTML结构。但总而言之，我们完全同意你的看法。