当最初通过 url 选择不同的选项卡时处理延迟加载选项卡#

Question

我正在调整一个网站，其中包含多个内容繁重的选项卡，以便它们在首次单击时或首次单击时延迟加载。为此，我编写了以下 jquery:

$(document).ready(function(){
  $("#aa,#bb,#cc,#dd,#ee").bind("click", function() {
    target = $(this).data('target');
    section = $(this).data('section');
    if ($("#"+target).html() == "Loading") {
        urlstring = "mysite.com/item-tab.html?item=666&tabType="+section;
        $.ajax({ url: urlstring }).done(
            function(msg){ 
                $("#"+target).html(msg)
            });   
    }
  });
});

在 HTML 我有：

<ul class="nav nav-pills nav-justified hidden-print">
    <li class="first-tab active" id="aa" data-target="specContent" data-section="spec"><a href="#a" data-toggle="pill">Specification</a></li>
    <li id="bb" data-target="vidContent" data-section="videos"><a href="#b" data-toggle="pill">Videos</a></li>
    <!-- a bunch more like this --> 
</ul>

<div class="tab-content">
    <div  class="tab-pane fade active in" id="a">
        <h2>Product Specification</h2>
            <div id="specContent">Loading</div>
    </div> 

    <div  class="tab-pane fade" id="b">
        <h2>Product Videos</h2>
        <div id="vidContent">Loading</div>
    </div>
    <!-- a bunch more of these too -->
</div>

现在我碰壁了。通常第一个标签会在页面加载时打开，但偶尔会打开第二个标签，通过在末尾添加#bb 的 URL 完成。

我怎样才能了解这一点并在开始时加载第二个选项卡的内容？在 URL?

中通过 #bb 激活第二个选项卡时，是否有事件触发我可以检查

我的另一个可能的方向是访问 URL 并在 # 上拆分以提取 bb，如果我找到它则加载第二个选项卡但是搜索 SO 似乎表明我会 opening my script up to potential security risks 通过这样做。

我应该补充一点，如果它始终是开始时打开的第一个选项卡，我就不会在 jquery 中包含 #aa 并且会放入真实内容，而不是 "Loading"进入 div id="specContent"

感谢您的任何推荐、建议或指点。

Answer 1

好吧，我已经在 # 选项上拆分了 URL，所以我在这里回答我自己的问题。我创建了一个新的 loadTab 函数并将 onClick 部分设置为指向该函数，然后如果 URL 中有一个“#”与我页面中的元素匹配，则调用它，调用 data-target 和 data-section属性。似乎有效。

function loadTab(target, section) {
    if ($("#"+target).html() == "Loading") {
        urlstring = "mysite.com/item-tab.html?item=666&tabType="+section;
        $.ajax({ url: urlstring }).done(function(msg){ 
            $("#"+target).html(msg)
        });    
    }
}

if(window.location.href.indexOf('#') > -1) {
    elem = $(window.location.href.substring(window.location.href.indexOf('#')));
    if (elem.length) {
        target = elem.attr('data-target');
        section = elem.attr('data-section');
        loadTab(target, section);
    } 
} else {
    loadTab('specContent', 'spec');
}

$("#aa,#bb,#cc,#dd,#ee").bind("click", function() {
    loadTab($(this).data('target'), $(this).data('section'));
});

SO礼仪问题，只求评论。发布问题然后在24小时内自行解决有问题吗？

当最初通过 url 选择不同的选项卡时处理延迟加载选项卡#

Dealing with lazy loading tabs when different tab initially selected through url #

jquery

tabs

lazy-loading