用数据库中的信息填充jquery选项卡的标题 - fill jquery tabs header with information from database

fill jquery tabs header with information from database

我有一个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和这些都是DB中的名字，而不是将表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>
        }
    ?>

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

假设您有一个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);
});

这是一把你可以玩的小提琴：http://jsfiddle.net/MarkSchultheiss/p4mzy3hb/