jquery 从外部访问时切换选项卡的活动状态 link

Question

我有一个包含 3 个选项卡的页面。在任何时候，都有 2 个选项卡处于隐藏状态。有一个子导航菜单来处理此 show/hide 功能。当您单击子导航上的 link 时，该选项卡打开并且子导航显示该选项卡 link 处于活动状态（通过不同的字体颜色）。伟大的！但是...

问题
但是，当我从外部 link（如“http://example.com#subDivTab2”）访问该选项卡时，它会转到该选项卡并显示它，但它不会触发该活动状态。子导航中 link 的字体颜色没有改变。如果在同一页面上，它应该模拟打开选项卡并显示字体颜色变化。

TAB 开关代码

$('a.subDivSwitchLink').click(function (e) {
    var $this = $(this),
    containerSelector = $this.attr('href'),
    $links = $('a.subDivSwitchLink');
    e.preventDefault();
    $('div.subDivSwitch').not(containerSelector).hide();
    $(containerSelector).show();
    //active tab state
    $links.not($this).toggleClass('subTitleActive', false);
    $this.toggleClass('subTitleActive', true);
});

活动状态触发器（在同一页上时）
这就是触发选项卡打开的原因

var target = '#'+'subDivTab1';
$('a[href="'+target+'"].subDivSwitchLink').click();

外部 LINK 选项卡打开代码
这是触发从外部打开选项卡的原因 link

var hash = $.trim(window.location.hash);
$('a[href="'+hash+'"].subDivSwitchLink').click();

ATTEMPT
我尝试了以下方法，但它不起作用

var hash = ($.trim(window.location.hash)+'subDivTab1');
$('a[href="'+hash+'"].subDivSwitchLink').click();

FIDDLE
减少大小写fiddle以帮助
http://jsfiddle.net/zuhloobie/m1fua9jp/

Answer 1

当您使用 window.location.hash 检测当前选项卡时，您走在了正确的轨道上。只需像您一样使用 jQuery 变量来触发类：

var hash = $.trim(window.location.hash);
if(!hash){
    hash = $('a.subDivSwitchLink:first').attr('href');
}

var activeTab = $('a[href="'+hash+'"].subDivSwitchLink');

$('a.subDivSwitchLink').toggleClass('subTitleActive', false);
$('a.subDivSwitchLink')
    .each(function(){
        $($(this).attr('href')).hide();
    });

activeTab.toggleClass('subTitleActive', true);
$(hash).show();

jquery 从外部访问时切换选项卡的活动状态 link

jquery toggle a tab's active state when visited from external link

jquery

tabs