jQuery 选项卡在一些但不是所有网站上工作

Posted 2023-05-08

【中文标题】jQuery 选项卡在一些但不是所有网站上工作

【英文标题】：jQuery tabs working on some but not all websites

【发布时间】：2017-06-25 20:15:51

【问题描述】：

我正在尝试创建一个可在多个网站上使用的选项卡式表单。我发现代码 sn-p 在某些页面上有效，并且选项卡存在并且功能正常，但在一个特定网站上，选项卡不显示并且我收到以下控制台错误：Uncaught TypeError: $(...).tabs is not a function。我自己调试这个或在线搜索答案没有任何运气。任何帮助将不胜感激:)

我遇到问题的网站：http://www.jetstar.com/sg/en/home 它似乎可以正常工作的网站：https://tigerair.com.au/

请注意，下面的代码 sn-p 假设网站上已经存在 jQuery。我尝试过先加载最新版本的 jQuery，但也没有成功。

if (typeof($) == 'undefined') 
  var $ = jQuery;


function createInvisibleDiv() 
  var invisiblePageSizedDiv = document.createElement("div");
  invisiblePageSizedDiv.setAttribute("id", "pageDiv"); 
  invisiblePageSizedDiv.setAttribute("class", "overlay");
  document.body.appendChild(invisiblePageSizedDiv);
  var style = document.createElement('style');
  style.type = 'text/css';
  style.innerhtml = '.overlaybottom:0; right:0; left: 0; top:0; overflow:hidden;background-color:rgba(88,88,90,0.8); z-index: 100; position:absolute;';
  document.body.appendChild(style);
  document.body.style.position = "relative";


//this function creates the two tabs
function createUnorderedList()
    var $unorderedList = $("<ul></ul>");
    $unorderedList.attr("id", "unorderedList"); 
    $unorderedList.attr("class", "ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all")
    for (var i=1; i<3; ++i) 
        var $linkItem = $("<li></li>");
        $linkItem.append(createLink(i));
        $linkItem.attr("class", "ui-state-default ui-corner-top")
        $unorderedList.append($linkItem);
    
    return $unorderedList;


function createLink(i)
    var $link = $("<a></a>");
    if (i==1) 
        $link.attr("href":'#foo', "title":"Foo");
        $link.text("Foo");
     else 
        $link.attr("href":'#bar', "title":"Bar");
        $link.text("Bar");
    
    return $link; 


function createFooForm() 
    var $ele = $("<div></div>");
    $ele.attr("id", "foo");
    $ele.text("Thanks for looking at my code");
    return $ele;


function createBarForm() 
    var $ele = $("<div></div>");
    $ele.attr("id", "bar");
    $ele.text("I super appreciate it!");
    return $ele;


function loadScript(url, callback)

    // Adding the script tag to the head
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);


var generateTabsFunction = function() 
    createInvisibleDiv();
    var $invisibleDiv = $('#pageDiv');
    var $containerDiv = $("<div></div>");
    $containerDiv.attr("id", "containerDiv");

    $containerDiv.append(createUnorderedList());
    $containerDiv.append(createFooForm());
    $containerDiv.append(createBarForm());
    $invisibleDiv.append($containerDiv);
    $('body').append($containerDiv);
    $( "#containerDiv" ).tabs();


$("<link/>", 
   rel: "stylesheet",
   type: "text/css",
   href: "https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"
).appendTo("head");

loadScript("https://code.jquery.com/ui/1.12.1/jquery-ui.js", generateTabsFunction);

【参考方案1】：

听起来你已经包含了 JQuery，但忘记包含 JQueryUI

【讨论】：

感谢您的回复，但是jQueryUI是专门在最后一行加载的。