选项卡式内容中的相同字段

Question

我有一个涵盖 CSS 选项卡内容的表单，并将根据选项卡中的选定字段计算内容。

问题 1：该表单通常可以跨多个选项卡工作吗？

问题 2: 我有一些字段会在多个选项卡中重复出现。我如何管理这个？只是复制粘贴它们还是使用不同的 ID？不确定在这种情况下表格的行为方式。请指教

<html>
  <head>
    <script type="text/javascript">

      function activateTab(pageId) {
          var tabCtrl = document.getElementById('tabCtrl');
          var pageToActivate = document.getElementById(pageId);
          for (var i = 0; i < tabCtrl.childNodes.length; i++) {
              var node = tabCtrl.childNodes[i];
              if (node.nodeType == 1) { /* Element */
                  node.style.display = (node == pageToActivate) ? 'block' : 'none';
              }
          }
      }

    </script>
  </head>
  <body>
    <ul>
      <li>
        <a href="javascript:activateTab('page1')">Tab 1</a>
      </li>
      <li>
        <a href="javascript:activateTab('page2')">Tab 2</a>
      </li>
    </ul>
    <div id="tabCtrl">

<form name="myForm" METHOD=post ACTION="/Calculate">

     <div id="page1" style="display: block;">Page 1
        <select name="field1" id="field1">
        <option value="0" selected="selected">- Select</option>
        <option value="65">Value 1</option>
        <option value="75">Value 2</option>
        </select>
      </div>

      <div id="page2" style="display: none;">Page 2
        <select name="field1" id="field1">
            <option value="0" selected="selected">- Select</option>
            <option value="65">Value 1</option>
            <option value="75">Value 1</option>
        </select>
        <select name="field2" id="field2">
            <option value="0" selected="selected">- Select</option>
            <option value="1">Value 1</option>
            <option value="2">Value 2</option>
        </select>
      </div>      
     </form>      
    </div>
  </body>
</html>

Answer 1

正如 Austin 所建议的，有两种形式可以解决我的问题

选项卡式内容中的相同字段

same fields within tabbed content

javascript

css

tabbed