Изменить заголовок вкладки 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>

Я чувствую себя очень глупо, потому что не могу Google ответить, но все, что я хочу сделать, этоизмените ярлык вкладок / заголовок / текст.

Таким образом, вкладка 1 становится «Сотрудник 12345» или «Джон Смит», например:

<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

Если вы вызываете заголовки вкладок из базы данных, вам сначала нужно получить эти данные.Я бы посоветовал хранить его в массиве.

После того, как вы получите массив, вы можете заменить текст HTML перед вызовом Tab.

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