Question

我目前有3个单独的字段集2（B＆amp; C）包含表单和一个（A）包含列表。 Fieldset A位于左侧，右侧的指定位置为B和C字段。

字段集A中单击的内容将确定将显示哪个字段集。因此，如果我单击A上的列表项1，则B将出现在右侧。如果我点击列表项2，C将替换B.

我现在不关心CSS，我只想在选择li时显示相应的字段集。

我对如何实现这一点感到困惑。我已经玩过在php中使用显示功能的想法，并且取决于选择调用该功能的内容。但是，我觉得这更像是一个JavaScript的东西。理想情况下，拥有一个显示HTML结构的JavaScript函数会很不错。因此，当单击li时，将调用该函数。但是，我对JavaScript非常陌生，我的尝试还没有奏效。我甚至在正确的轨道上完成了这个？任何意见都将不胜感激。

我的代码：

＆＃13;

<fieldset >
	<legend>A</legend>
		<ul>
		<li onclick ="displayB();">List Item 1</li>
		<li onclick ="displayC();">List Item 2</li>
		</ul>
  </fieldset>

<script>
function displayB(){ </script>
	<fieldset>
	<legend>B</legend>
		<form method="post" action="index.php">
			<label>Input 1&nbsp;</label>
			<input type="text" size="20">
			<br>
			<label>Input 2&nbsp;</label>
			<input type="text" size="20">
			<br>						
			<input type="submit" value="Add" />
		</form>
		<table>
		<tr>
		<td></td><td>Input</td>
		</tr>	
		<tr>
		<td><button>X</button></td><td>Input 1</td>
		</tr>
		</table>					
	</fieldset>
			
<script> } 	 
function displayC(){ </script>
	<fieldset>
	<legend>C</legend>
		<form method="post" action="index.php">
			<label>Input 1&nbsp;</label>
			<input type="text" size="20">
			<br>
			<label>Input 2&nbsp;</label>
			<input type="text" size="20">
			<br>						
			<select>
				<option>Option 1</option>
			</select>
		</form>
		<input style="float:right;" type="submit" value="Edit" />				
	</fieldset>
<script> } </script>

＆＃13;

Answer 1

如果你不介意在DOM中同时使用HTML，你可以这样做：

小提琴：http://jsfiddle.net/bw87qbns/

HTML：

<div class="container">
    <fieldset>
    <legend>A</legend>
        <ul>
        <li onclick ="displayFieldsets('B', 'C');">List Item 1</li>
        <li onclick ="displayFieldsets('C', 'B');">List Item 2</li>
        </ul>
  </fieldset>
</div>
<div class="container">
    <fieldset id="B">
    <legend>B</legend>
        <form method="post" action="index.php">
            <label>Input 1&nbsp;</label>
            <input type="text" size="20">
            <br>
            <label>Input 2&nbsp;</label>
            <input type="text" size="20">
            <br>                        
            <input type="submit" value="Add" />
        </form>
        <table>
        <tr>
        <td></td><td>IP</td><td>Zone</td><td>Input)</td>
        </tr>   
        <tr>
        <td><button>X</button></td><td>Input 1</td>
        </tr>
        </table>                    
    </fieldset>
                <fieldset id="C">
    <legend>C</legend>
        <form method="post" action="index.php">
            <label>Input 1&nbsp;</label>
            <input type="text" size="20">
            <br>
            <label>Input 2&nbsp;</label>
            <input type="text" size="20">
            <br>                        
            <select>
                <option>Option 1</option>
            </select>
        </form>
        <input style="float:right;" type="submit" value="Edit" />               
    </fieldset>
</div>

JS：

function displayFieldsets (id1, id2) {
    document.getElementById(id1).style.display = 'block';
    document.getElementById(id2).style.display = 'none';
}

CSS：

.container {
    display: inline-block;
    width: 49%;
    vertical-align: top;
}

#B, #C {
    display: none;
}

如果您只想在需要时插入HTML，我可以向您展示如何更改它以执行此操作。让我知道！ =]

编辑：正如评论中所述，只使用CSS类的另一种方法：http://jsfiddle.net/bw87qbns/1/

Answer 2

我担心你不能像这样混合JavaScript和HTML。

这是一个纯CSS解决方案。它使用隐藏的input元素。单击label后，将显示相应的fieldset。

fieldset:first-of-type {
  display: block;
}

fieldset {
  display: none;
}

#IB, #IC {
  display: none;
}

#IB:checked ~ fieldset.B {
  display: block;
}

#IC:checked ~ fieldset.C {
  display: block;
}

<fieldset>
  <legend>A</legend>
  <ul>
    <li><label for="IB">List Item 1</label></li>
    <li><label for="IC">List Item 2</label></li>
  </ul>
</fieldset>

<input id="IB" name="field" type="radio"></input>
<input id="IC" name="field" type="radio"></input>

<fieldset class="B">
  <legend>B</legend>
  <form method="post" action="index.php">
    <label>Input 1&nbsp;</label>
    <input type="text" size="20">
    <br>
    <label>Input 2&nbsp;</label>
    <input type="text" size="20">
    <br>
    <input type="submit" value="Add" />
  </form>
  <table>
    <tr>
      <td></td>
      <td>Input</td>
    </tr>
    <tr>
      <td>
        <button>X</button>
      </td>
      <td>Input 1</td>
    </tr>
  </table>
</fieldset>

<fieldset class="C">
  <legend>C</legend>
  <form method="post" action="index.php">
    <label>Input 1&nbsp;</label>
    <input type="text" size="20">
    <br>
    <label>Input 2&nbsp;</label>
    <input type="text" size="20">
    <br>
    <select>
      <option>Option 1</option>
    </select>
  </form>
  <input style="float:right;" type="submit" value="Edit" />
</fieldset>

JavaScript - 根据事件

2 个答案: