3

这似乎很简单，但我无法在任何地方找到解决方案。我需要有选项卡或带有选项的标签，可以从一种形式来回切换到另一种形式，并让我的复制/重置按钮适用于正在使用的任何形式。

这是一个单独形式的示例，我需要再添加大约 3 个并保持其格式。（我的实际页面有 CSS 样式格式，还有大约 10 项要填写）：

更新：在尝试了到目前为止的答案之后，我意识到我也需要一种在 IE7 中有效的方法来做到这一点。

<head>
<title>Form Switching</title>
</head>

<body>

<!-- First Form -->
<form name="data_entry" id="frm" action="#">
  <h2>Form 1</h2>

  <table cellspacing="5" cellpadding="3">
    <tr>
  <td>Name:</td>
      <td><textarea name="name" rows="2" cols="30" id="txt_name"></textarea></td>
    </tr>
    <tr>
      <td>Color:</td>
      <td><select name="color" id="txt_color">
          <option value=""></option>
          <option value="It is red">Red</option>
          <option value="It is blue">Blue</option>
        </select></td>
    </tr>
    <tr>
      <td>Phone Number:</td>
      <td><textarea name="phone" rows="5" cols="30" id="txt_phone"></textarea></td>
    </tr>
    <tr>
      <td>Distance:</td>
      <td><textarea name="distance" rows="1" cols="30" id="txt_distance"></textarea></td>
    </tr>

    <tr> 
      <!--COPY BUTTON-->
      <td><input type="button" style="font-weight:bold;" name="clipboard_copy" value="Copy" 
onClick="document.data_entry.holdtext.value = 'Name:&nbsp;' + document.data_entry.name.value + '\n' + 'Color:&nbsp;' + document.data_entry.color.value + '\n' + 'Phone:&nbsp;' + document.data_entry.phone.value + '\n' + 'Distance:&nbsp;' + document.data_entry.distance.value; javascript:selectcopy('data_entry.holdtext');javascript:validateForm()"></td>
      <!--RESET BUTTON-->
      <td><input type="button" style="font-weight:bold;" name="reset_form" value="Reset" onClick="this.form.reset();" /></td>
    </tr>

  </table>


  <!-- Invisible text box that concatenates all the text boxes into one so they can be copied -->
  <TEXTAREA name="holdtext" readonly="readonly" style="height:1px;width:1px;border:0" ID="holdtext"></TEXTAREA>
</form>

<SCRIPT LANGUAGE="JavaScript">

// ---------- Function to copy text to clipboard ----------
    function selectcopy(fieldid)
    {
    var field=document.getElementById(fieldid) || eval('document.'+fieldid)
    field.select()
    if (field.createTextRange)
    {field.createTextRange().execCommand("Copy")}
    }

</SCRIPT>
</body>
</html>

如果需要更多的 Javascript，请给我更多关于如何使用它的解释，因为我还没有经验，而且我无法使用 jquery，因为我只能在我的公司计算机上工作我无法将任何文件下载到。我正在用记事本写我的页面，更不用说即使在研究了 jQuery 之后，我仍然不知道它到底做了什么。

4

1 回答 1

3

用小提琴更新：http: //jsfiddle.net/f8Qvd/5/

更新 #2 现在应该在 IE7 中工作

如果没有 jQuery，这并不太难，尽管我认为你应该与工作中的人谈谈他们的文件下载政策。无论如何，如果你想在不使用 jQuery 的情况下继续，只需将所有表单添加到一些 div 中，并确保将它们全部放在一个漂亮的容器 div 中，以使你的生活更轻松。

您还可以使用链接或可点击的 div 制作一个导航栏（如果需要，可以选择样式为选项卡），并参考相应表单容器的 id，例如：

<div id="tab-nav">
    <a href="javascript:;" class="selected" data-container="form-1-container">form1</a>
    <a href="javascript:;" data-container="form-2-container">form2</a>
    <a href="javascript:;" data-container="form-3-container">form3</a>
</div><!-- #tab-nav -->

<div id="awesome-container">
    <div id="form-1-container">first tab</div>
    <div id="form-2-container">second tab</div>
    <div id="form-3-container">third tab</div>
</div><!-- #awesome-container -->

确保赋予它们所有独特的id属性，并使用一些好的旧 css 为最初隐藏的 div 设置样式：

#tab-nav {
    border: 1px solid black;
    width: 400px;
    text-align: center;
}

#tab-nav a {
    margin-left:25px;
    margin-right:25px;
    text-decoration: none;
}

#tab-nav a.selected {
    background: #ccd;
    border: 1px solid #999;
    border-radius: 4px;
    padding-left: 10px;
    padding-right: 10px;
}

#awesome-container {
    width:400px;
    height: 300px;
    border: 1px solid blue;
}

#awesome-container div {
    width: 400px;
    height:300px;
    margin:0;
}

#awesome-container #form-1-container {
    background: #ddd;
}
#awesome-container #form-2-container {
    background: #f06;
    display: none;
}
#awesome-container #form-3-container {
    background: #04b;
    display: none;
}

我的上帝，这些标签会很漂亮！

继续...到 javascript :)

编写一个处理选项卡和导航样式的点击处理程序。通常在没有 jQuery 的情况下，我们只会使用querySelectorAlldom 元素列表来进行操作，但遗憾的是它在 IE7 中不可用，所以：

(function(){
    var clack = function(e){
        
        // IE is whack, apparently
        var e = e || window.event;
        if( e.srcElement ) {
            e.target = e.srcElement;
        };
        
        var divs = document.getElementById("awesome-container").childNodes;
        for (var i = 0; i < divs.length; i++){
            if (divs[i].firstChild !== null) { // ignore text nodes
                divs[i].style.display = "none";
            }
        }
        document.getElementById(e.target.getAttribute("data-container")).style.display = "block";
        var links = document.getElementById("tab-nav").childNodes;
        for (var j = 0; j < links.length; j++) {
            if (links[j].firstChild !== null) { // ignore text nodes
                links[j].className = "";
            }
        }
        e.target.className = "selected";
    };

    var links = document.getElementById("tab-nav").childNodes;
    for (var i = 0; i < links.length; i++) {
        if (links[i].firstChild !== null) { // you get the idea
            links[i].onclick = clack;
        }
    }
})();

那应该让你去！

要查看它的实际效果：查看小提琴：http: //jsfiddle.net/f8Qvd/5/

于 2013-05-28T21:48:52.463 回答