Question

我在页面B上有一个简单的动态选项卡式图库，使用以下代码：

$('ul.tabs li').click(function(){
     event.preventDefault();

     var tab_id = $(this).attr('data-tab');

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

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

假设我在页面A上有一个链接，我想链接到页面B，并且页面B上的相应选项卡处于活动状态。我该怎么做呢？我一直在尝试研究href标签中的数据属性，我很困惑。

谢谢！

Answer 1

使用页面哈希指定页面的初始选项卡。因此，如果您希望显示tab3，请使用以下链接：

<a href="page_b.html#tab3">...</a>

在页面B上，检查页面加载时的哈希：

$(document.ready(function() {
    var hash = window.location.hash;
    if (hash) {
        $('ul.tabs li > figcaption, .tab-content').removeClass('current');
        $(hash).addClass('current');
        $('ul.tabs li[data-tab=' + hash.substr(1) +'] figcaption').addClass('current');
    }
    ...
});

jQuery - 使用数据属性链接到页面

1 个答案: