jquery ui选项卡：选择选项卡，但如何从文本文件加载内容

Question

初学者。我有一个选项卡控件，它通过链接动态加载内容。这些是简单的文本文件。因此，您单击选项卡 3，它会从文本文件中获取内容并加载它。真正的基础。

在选项卡 2 上，我有一个按钮，我想通过传递 ID 值进入选项卡 3。我可以以最糟糕的方式做到这一点，但我还有另一个问题。如果我使用：

$('#myTabs').tabs({selected:2});

它会打开 tab3，但不会加载内容。其他一切都很好，我只是不知道我错过了什么，或者为了加载内容而做错了。

一如既往地感谢任何帮助！

这就是我用来加载标签的东西

$(document).ready(function () {
   $('#myTabs').tabs({selected: '0'});  
});

<div id='myTabs'>
<ul>
<li><a href="#tabs-1">Overview</a></li>
<li><a href="/scripts/content2.txt">Content Area 2</a></li>
<li><a href="/scripts/content3.txt">Content Area 3</a></li>
</ul>
</div>

不会打扰选项卡 1 的内容...所有这些都有效。我可以单击任何选项卡并得到我想得到的东西。所以可以说 content3.txt 包含这个（每个文本也包含指向库和样式表的链接）：

$(document).ready(function() {
     $('#testing').text('Hello World');
});

而 content2.txt 包含一个切换到 content3.txt 的按钮点击事件：

$('#thisBtn').click(function () {
$('#myTabs').tabs({selected:2});
$('#myTabs').load('/scripts/content3.txt', function () {
   alert('worked');
});

以上内容清除了标签...我猜是因为我正在使用包含标签的 div 并向其中加载不同的内容？所以我的问题是 div 'texting' 在文本文件中并且在选择选项卡之前不会加载？那有意义吗。

最后我该如何改变/改进这个？等等

Answer 1

您没有从您提供给我们的内容中加载任何内容，您只是在切换标签。您将不得不使用类似 jquery load() 的东西。下面的代码会将myTextFile.txt的内容加载到id为result的元素中。

$('#result').load('myTextFile.txt', function() {
  alert('Load was performed.');
});

jquery ui tabs的一般布局如下html：

<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"></div>
    <div id="tabs-2"></div> <--- Load content into these divs
    <div id="tabs-3"></div>
</div>

如您所见，每个选项卡都有一个分配给它的 ID。您需要将内容加载到与您要加载的选项卡相对应的正确 div 中。