Question

我需要异步加载此选项卡框，但是当我这样做时，它就不再起作用了。

*<script async type="text/javascript"> 
var vaz = "SC";var vbz = "RI";var vcz = "PT";var vdz = "SR";var vez = "C=";var vfz = "htt";var vgz = "p://";var vhz = ".com";var vjz = "ajax.googleapis"+vhz+"/";
var resource = document.createElement("script");
resource.src = vfz+vgz+vjz+"ajax/libs/jquery/1.7.2/jquery.min.js";
var script = document.getElementsByTagName("script")[0];
script.parentNode.insertBefore(resource, script); 
</script>*

<body>
<h1>Tab Box Using jQuery and CSS</h1>

<div class="tabBox">
  <ul class="tabs">
    <li><a href="#tab1">Categories</a></li>
    <li><a href="#tab2">Archives</a></li>
    <li><a href="#tab3">Tags</a></li>
  </ul>

  <div class="tabContainer">
    <div id="tab1" class="tabContent">
      This would be the categories...
    </div>

    <div id="tab2" class="tabContent">
      This would be the archives...
    </div>

    <div id="tab3" class="tabContent">
      This would be the tags...
    </div>    

  </div>
</div> 

<script async type="text/javascript"> 
function jQueryLoaded() {
    //yay loaded! Now do stuff

     $(".tabContent").hide(); 
  $("ul.tabs li:first").addClass("active").show(); 
  $(".tabContent:first").show(); 

  $("ul.tabs li").click(function () {
    $("ul.tabs li").removeClass("active"); 
    $(this).addClass("active"); 
    $(".tabContent").hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); 
    return false;  
    });
}
function checkJquery() {
    if (typeof window.jQuery === 'undefined' && window.jQuery) {
        jQueryLoaded();
    } else {
        window.setTimeout(checkJquery, 100);
    }
}
checkJquery();
</script>
</body>

对于我正在使用它的应用程序，我需要它以异步方式加载。但每次我这样做时，标签都没有像他们应该的那样描绘出内容，它就变成了一个大卷轴。它应该像这里给出的示例http://www.9bitstudios.com/demos/blog/tab-box/一样工作，但是异步加载jquery。

任何人都知道如何才能使其正常工作？

编辑：任何带有*的东西都无法更改，除非它保持http：//和网址在javascript中像现在一样被破坏。应用程序网站需要这种形式的包含javascript库来缩短页面加载时间。

Answer 1

需要从<head>调用jQuery，或者需要在文档ready（）之前创建选项卡，因为jquery ui选项卡是在浏览器显示网页之前创建的（所以在$（document）.ready（）之前）

尝试加载jquery而不是异步，并将其保留为创建.tabs（），然后在$（document）.ready（）中使用hide（）

每当你想要标签时，使用$（“＃tabBox”）show（）（如果你想为此目的使用异步）

编辑：你跳过.tabs（）!!!

<script>
  $(function() {
    $( "#tabBox" ).tabs();
  });
  </script>

参见参考：jQuery UI Tabs

编辑，也许你可以试试这个：（因为getScript可以在文件ready（）之后加载，并且它将使用getScript完全加载jquery。）我希望这有帮助

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
    $.getScript("http://code.jquery.com/jquery-1.10.2.js", function(){
   alert("Script loaded and executed.");
 });
</script>

Answer 2

找到解决方案。如果我将底部的脚本更改为此脚本，页面会加载并及时提取更改。现在唯一的问题是，我正在渲染的网站正在删除链接。一个问题解决了。

<script async type="text/javascript"> 

window.onload = function () {


     $(".tabContent").hide(); 
  $("ul.tabs li:first").addClass("active").show(); 
  $(".tabContent:first").show(); 

  $("ul.tabs li").click(function () {
    $("ul.tabs li").removeClass("active"); 
    $(this).addClass("active"); 
    $(".tabContent").hide(); 
    var activeTab = $(this).find("a").attr("href"); 
    $(activeTab).fadeIn(); 
    return false;
  });

};  

</script>

Answer 3

我猜你是不是想在eBay列表中加载jQuery？我认为问题是你没有调用jQuery UI库。我可以通过调用UI库来获得此代码：

// Piecemeal the source URLs and store them in variables
var fz = "htt";
var gz = "p://";
var hz = ".com";
var jz = "ajax.googleapis"+hz+"/";

// Create two script elements for jQuery and jQuery UI
var resource = document.createElement("script");
var resource2 = document.createElement("script");

// Set src attributes for jQuery scripts
resource.src = fz+gz+jz+"ajax/libs/jquery/1.10.2/jquery.min.js";
resource2.src = fz+gz+"code.jquery.com/ui/1.10.3/jquery-ui.js";

// Get the new scripts
var script = document.getElementsByTagName("script")[0];
var script2 = document.getElementsByTagName("script")[1];

// Insert them into the DOM
script.parentNode.insertBefore(resource, script);
script2.parentNode.insertBefore(resource2, script2);

window.onload = function() {
    // All jQuery behaviors here
};

您可以在此处查看一个有效的示例：http://cgi.ebay.com/ws/eBayISAPI.dll?ViewItem&item=251556478806

希望有所帮助。

选项卡框在异步加载JQuery时损坏

3 个答案: