使用数据库中的信息填充 jquery 选项卡 header

Question

我有一个Tab组件的结构，但我会喜欢每个选项卡的头部是存储在数据库中的一个人的名字。

例如，通常这是一个标签结构

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

但我希望 Marc、Josef、Luis 不是 Tab 1,2 和 3 作为每个选项卡的标题文本，这些都是数据库中的名称。这还包括每次添加一个人时我都会有一个新标签。有人知道我该怎么做吗？

我尝试在头部的文本中调用 PHP 查询的结果，但是没有用 **********使用代码编辑******************

 <?php
    $connection = mysql_connect(/*DAta connectionns*/);
    if (!$connection)
    {
    die('Could not connect: ' . mysql_error());
    }
    mysql_select_db("", $connection);


    $result = mysql_query("SELECT * FROM People");
    while($row = mysql_fetch_array($result))
    {
      $r = $row["name"];


 <div id="tabs">
    <ul>
    <li><a href="#tab-1"><?php $r ?></a></li>
    </ul>
    <div class="panels">
     </div>
    </div>
        }
    ?>

我知道有问题，但是我看不到

Answer 1

假设您有一个 JavaScript 对象（来自您的 ajax？）您可以：

var mytabs = [{
  name: "Marc"
}, {
  name: "Josef"
}, {
  name: "Luis"
}];
$('#tabs').tabs();
$.each(mytabs, function(indexInArray, myobj) {
  $('#tabs').find('li> a').eq(indexInArray).text(myobj.name);
});

这里有一个 fiddle 你可以玩：http://jsfiddle.net/MarkSchultheiss/p4mzy3hb/

使用数据库中的信息填充 jquery 选项卡 header

fill jquery tabs header with information from database

php

jquery

tabs