Question

我有一个包含3个标签的页面。任何时候，隐藏了2个选项卡。有一个子导航菜单来处理这个显示/隐藏功能。当您单击子窗口上的链接时，该选项卡将打开，子窗口将该选项卡链接显示为活动（通过不同的字体颜色）。大！但是......

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

TAB SWITCH CODE

$('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();

EXTERNAL LINK TAB OPEN CODE
这是触发从外部链接打开标签的内容

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
减少案例小提琴帮助
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切换选项卡的活动状态

1 个答案: