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 Smith”，例如：

<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>

更改jQueryUI标签标题

2 个答案: