如何为模板创建动态 LI 和 DIV

Question

我想知道什么语言可以使我的模板动态化。示例 HTML 结构

<div id="tabs">
  <ul class="tabs">
    <li><a href="#tabs-1">Header</a></li>
    <li><a href="#tabs-2">Navigation</a></li>
    <li><a href="#tabs-3">Layout &amp; Colors</a></li>
    <li><a href="#tabs-4">Optimization</a></li>
    <li><a href="#tabs-5">Miscellaneous</a></li>
  </ul>
  <form method="post" action="options.php">
    <div class="tab-container">
      <div id="tabs-1" class="tab-content">Header</div>
      <div id="tabs-2" class="tab-content">Navigation</div>
      <div id="tabs-3" class="tab-content">Layout &amp; Colors</div>
      <div id="tabs-4" class="tab-content">Optimization</div>
      <div id="tabs-5" class="tab-content">Miscellaneous</div>
    </div>
  </form>
</div>

我想要LI 和DIV

<li><a href="#tabs-1">Header</a></li>
<div id="tabs-1" class="tab-content">Header</div>

不用一一写就可以动态。该怎么做？

Answer 1

jQuery 模板在这种情况下效果最好。 检查文档@：

http://api.jquery.com/jQuery.template/

Answer 2

我会使用Python，更具体地说是Flask。这是一个可能有效的模板。我猜您元素的名称存储在get_titles 返回的列表中：

<div id="tabs">
  <ul class="tabs">
  {% for index in get_titles|length %}
    <li><a href="#tabs-{{ index + 1 }}">{{ titles[index] }}</a></li>
  {% endfor %}
  </ul>

  <form method="post" action="options.php">
    <div class="tab-container">
    {% for index in titles|length %}
      <div id="tabs-{{ index + 1 }}" class="tab-content">{{ titles[index] }}</div>
    {% endfor %}
    </div>
  </form>
</div>

不过话说回来，这可能有点矫枉过正。