JavaScript - 根據事件在同一區域顯示不同的字段集

Question

我目前有3個獨立的字段集兩個（B & C）包含窗體和一個（A）包含一個列表。字段A將位於左側，字段B和C將在右側指定位置。

在字段集A中單擊的內容將決定將顯示哪個字段集。 因此，如果我單擊A上的列表項目1，B將出現在右側。如果我點擊列表項目2，C將取代B.

我目前不關心CSS，我只想在選擇li時顯示相應的字段集。

我很困惑如何實現這個目標。我玩過在php中使用顯示功能的想法，並根據所選的功能調用該功能。不過，我覺得這更像是一個JavaScript的東西。理想情況下，最好有一個JavaScript函數來顯示HTML結構。所以當點擊li時，該函數將被調用。不過，我對JavaScript很陌生，而我在這方面的嘗試還沒有成功。我甚至在正確的軌道上完成這個？任何投入將不勝感激。

我的代碼：

<fieldset > 
 
\t <legend>A</legend> 
 
\t \t <ul> 
 
\t \t <li onclick ="displayB();">List Item 1</li> 
 
\t \t <li onclick ="displayC();">List Item 2</li> 
 
\t \t </ul> 
 
    </fieldset> 
 

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

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>