如何为模板创建动态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>

但话又说回来，这可能有点过头了。