Question

在第17课“安装和使用jQuery插件”的微软视频“Javascript基础知识7小时”中，从链接开始于05:28:20：

它描述了如何使用jQuery和jQuery-UI实现选项卡。缩写的HTML源代码是：

<div class="demo">
  <div id="tabs">
    <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
       <li><a href="#tabs-2">Proin dolor</a></li>
       <li><a href="#tabs-3">Aenean lacinia</a></li>
     </ul>
  <div id="tabs-1">
    <p>Latin text 1 .... </p>
  </div>
  <div id="tabs-2">
    <p>Latin text 2 .... </p>
  </div>
  <div id="tabs-3">
    <p>Latin text 3A .... </p><p>Latin text 3B .... </p>
  </div>
</div>

问题是该视频是在2012年左右使用旧版本的jQuery和jQuery-UI制作的。大多数情况下，这不是什么大问题，但在视频中，使用代码添加动态选项卡：

$(function() {
  $("#tabs").tabs().tabs("add", "C9JS_16_html", "Click-a-bob");
});

不幸的是，方法选项卡（“add”，link，title）在我正在使用的jQuery1.12.0和jQuery-UI.1.11.4版本中不再有效。

我查看了链接：

http://jqueryui.com/upgrade-guide/1.9/#deprecated-add-and-remove-methods-and-events-use-refresh-method

尝试使用它没有太大的成功。我可以得到代码：

$(function() {
  $('li:last').append('<li><a href="C9JS_16.html">Click-a-bob</a></li>');
});

在以下后面的HTML DOM中插入链接：

<li><a href="#tabs-3">Aenean lacinia</a></li>

但它只是显示为列表中的常规链接，而我无法将其设置为在该行代码中使用.tabs（）显示为新选项卡。

有人知道如何解决这个问题吗？我将非常感谢任何帮助。

Answer 1

希望能帮助你开始：

＆＃13;

var path = window.location.pathname.split("/");
var strippedPath = path.slice(0, path.length-1).join("/");

＆＃13;

// The NEW Tab link
$("<li><a href='#tabs-4'>New Tab</a></li>").appendTo("#tabs .ui-tabs-nav");
// The NEW related Tab Content
$("<div id='tabs-4'><p>Latin text 4 .... </p></div>").appendTo("#tabs");



// Initiate UI Tabs
$("#tabs").tabs();

＆＃13;

Answer 2

您可以随时使用addNewTab之类的新函数扩展jQuery：

$.fn.addNewTab = function (name, title, content) {
  $('ul', this).append('<li><a href="#tab-' + name + '">' + title + '</a></li>');
  $(this).append("<div id='tab-" + name + "'>" + content + "</div>");
  $(this).tabs("refresh");
};


$(function () {
  $("#tabs").tabs().addNewTab("C9JS_16_html", "Click-a-bob", 'some text');
});

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>


<div class="demo">
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Nunc tincidunt</a></li>
            <li><a href="#tabs-2">Proin dolor</a></li>
            <li><a href="#tabs-3">Aenean lacinia</a></li>
        </ul>
        <div id="tabs-1">
            <p>Latin text 1 .... </p>
        </div>
        <div id="tabs-2">
            <p>Latin text 2 .... </p>
        </div>
        <div id="tabs-3">
            <p>Latin text 3A .... </p><p>Latin text 3B .... </p>
        </div>
    </div>
</div>

Answer 3

嗯，实际上我发现第一个回复并不完全正确。当您点击＆＃34; Click-a-bob＆＃34;选项卡，您确实获得了使用该标签显示的内容文本，但函数中的name参数未正常工作，因此当您将鼠标悬停在＆＃34; Click-a-bob＆＃34;标签，链接：... C9JS_17.html＃tab-C9JS_16.html显示在浏览器的底部，而不仅仅是C9JS_16.html，因此它不会在您点击链接时转到该页面。

事实上，在视频中，标签仍显示在原始页面上，其下方显示了C9JS_16.html的内容。看起来好像需要某种类型的iframe或其他一些包含，所以会对此提出一些建议。

但是，在此期间我对代码进行了以下更改：

$.fn.addNewTab = function (name, title, content) {
  $('ul',this).append('<li><a href="#tab-' + name + '">' + title + '</a></li>');
  $(this).append("<div id='tab-" + name + "'><a href='" + name + "'>" + content + "</a></div>");
  $(this).tabs("refresh");
};

$(function () {
  $('#tabs').tabs().addNewTab('C9JS_16.html', 'Click-a-bob', 'Click here for "Click-a-bob"');
});

我在C9JS_16.html的第3行代码中添加了一个链接，并更改了匿名函数的最后一个参数的写法。当您单击选项卡时，文本＆＃39;单击此处获取＆＃34; Click-a-bob＆＃34;＆＃39;显示，当您点击它时，它会转到C9JS_16.html页面。

使用新的jQuery和jQuery-ui替代.tabs（“add”，link，title）

3 个答案: