更改jQueryUI选项卡标题

Question

我设置了一个非常简单的jQueryui选项卡

http://api.jqueryui.com/tabs/

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
  </ul>

  <div id="tabs-1"><p>Container 1</p></div>
  <div id="tabs-2"><p>Container 2</p></div>
  <div id="tabs-3"><p>Container 3</p></div>
</div>

我觉得自己很蠢，因为我不能谷歌一个答案，但我想做的只是改变标签标签/标题/文本。

因此，表1变成"Employee 12345“或"John”，例如：

<ul>
  <li><a href="#tabs-1">John Smith</a></li>
  <li><a href="#tabs-2">Mary Doe</a></li>
  <li><a href="#tabs-3">Mickey Mouse</a></li>
</ul>

都使用jquery或javascript之类的代码。

是否需要使用HTML字符串构建整个部分，然后重新填充父div？或者我可以选择元素并更改属性吗？

Answer 1

如果要从数据库调用选项卡标题，则需要首先获取该数据。我建议把它存储在数组中。

一旦有了数组，就可以在调用Tabs之前替换HTML文本。

​

$(function() {
  // Create AJAX call to populate names
  // Example Data for Example
  var names = [
    "John Smith",
    "Mary Doe",
    "Mickey Mouse"
  ];
  $("#tabs ul li a").each(function(ind, el) {
    $(el).html(names[ind]);
  });
  $("#tabs").tabs();
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1 title</a></li>
    <li><a href="#tabs-2">Tab 2 title</a></li>
    <li><a href="#tabs-3">Tab 3 title</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1 content</p>
  </div>
  <div id="tabs-2">
    <p>Tab 2 content</p>
  </div>
  <div id="tabs-3">
    <p>Tab 3 content</p>
  </div>
</div>

​

您将希望进行AJAX调用并将值存储在数组中，或者在success回调中分配值。你自己选吧。然后，我们只需更新超链接的内部HTML。

在未来，最好包括所有的细节，你正在努力完成。

希望这能有所帮助。

Answer 2

它很简单:)

​

$("#tabs").tabs();

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1 title</a></li>
    <li><a href="#tabs-2">Tab 2 title</a></li>
    <li><a href="#tabs-3">Tab 3 title</a></li>
  </ul>
  <div id="tabs-1">
    <p>Tab 1 content</p>
  </div>
  <div id="tabs-2">
    <p>Tab 2 content</p>
  </div>
  <div id="tabs-3">
    <p>Tab 3 content</p>
  </div>
</div>

​