アンカータグをクリックするとフォームが表示されます

debugcn 投稿 Dev

ディンプル

私のような何かをしたい、このだけにするtable代わりに- div-tag。

使用する:activeと、アンカーをクリックしてもテーブルが表示されず、使用:targetすると、アンカーをクリックする前にテーブルが表示されます。

これが私のコードです：

<table id="addForm">
    <tr><td class="label">Address:</td><td><input type="text"></td></tr>
    <tr>
        <td class="label">Type of Toilet:</td>
        <td>    
            <input type="radio" name="sex" value="Male" checked>Male
            <input type="radio" name="sex" value="Female"> Female
            <input type="radio" name="sex" value="Both">Both
        </td>
    </tr>
    <tr>
        <td class="label">Review:</td>
        <td><input type="text"></td>
    </tr>
    <tr><td class="label">Rating:</td></tr>
</table>

CSS：

#addForm {
    display:none;
}

#addForm:active{
    display:block;
    font-style:Sans-serif;
    width:320;
    font-size:12;
    font-weight:bold;
}

クリススピトルズ

理想的には、JavaScriptを使用してこの機能を処理する必要があります。そうは言っても、次のようにアンカーでIDを持つ要素をターゲットにすることでこれを行うことができます。

方法1：純粋なCSS

#addForm {
  display: none;
}
#addForm:target {
  display: table;
}

<a href="#addForm">Show</a>

<table id="addForm">
    <tr>
        <td class="label">Address:</td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td class="label">Type of Toilet:</td>
        <td>
            <input type="radio" name="sex" value="Male" checked />Male
            <input type="radio" name="sex" value="Female" />Female
            <input type="radio" name="sex" value="Both" />Both</td>
    </tr>
    <tr>
        <td class="label">Review:</td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td class="label">Rating:</td>
    </tr>
</table>

方法2：JavaScriptの切り替え

より良い方法は、次のようなJavaScriptを使用することです。

$(function() {

  $("#showForm").on("click", function() {

    $("#addForm").toggle();

  });

});

#addForm {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="showForm">Test</a>

<table id="addForm">
  <tr>
    <td class="label">Address:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td class="label">Type of Toilet:</td>
    <td>
      <input type="radio" name="sex" value="Male" checked />Male
      <input type="radio" name="sex" value="Female" />Female
      <input type="radio" name="sex" value="Both" />Both</td>
  </tr>
  <tr>
    <td class="label">Review:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td class="label">Rating:</td>
  </tr>
</table>