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激活第二个标签？

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

我应该补充一点，如果它始终是第一个在开始时打开的标签，我就不会在jquery中包含#aa并且会放入真正的内容，而不是＆＃34;正在加载＆＃34;进入div id =＆＃34; specContent＆＃34;

感谢您提出任何建议，建议或指示。

Answer 1

好吧，我已经把＃split上的URL拆分了，所以我在这里回答了我自己的问题。我创建了一个新的loadTab函数，并将onClick部分设置为指向该函数，然后调用它，如果有一个＆＃39;＃＆＃39;在与我的页面中的元素匹配的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'));
});

礼仪问题，请注意。发布问题然后在24小时内自己解决问题是否有任何问题？

最初通过URL选择不同的选项卡时处理延迟加载选项卡＃

1 个答案: