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

Question

I want to know what language can make my template being dynamic. Example 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>

I want the LI and DIV

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

Can be dynamic without write it one by one. How to do that?

Answer 1

jQuery Templates works best in this scenario. Check the doc @:

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

Answer 2

I'd use Python , more specifically Flask . Here's a maybe-working template. I'm guessing your element's names are stored in a list returned by 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>

But then again, this might be a bit overkill.