Question

我想知道哪种语言可以让我的模板变得动态。示例HTML sturtcure

<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模板在这种情况下效果最佳。检查doc @：

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>

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

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

2 个答案: