单击锚标记时显示表单

I want to do something like this but to a table- instead of a div-tag.

我想做这样的事情,但要做一个表 - 而不是div-tag。

If I use :active it doesn't display the table when I click on the anchor and when I use :target it shows the table before clicking on the anchor.

如果我使用:active它在我点击锚点时不会显示表格,当我使用时:target它会在点击锚点之前显示表格。

Here's my code:

这是我的代码:

<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;
}

3 个解决方案

#1

Ideally you should be using JavaScript to handle this functionality. That being said you can do this by targeting an element that has an ID with your anchor like this:

理想情况下,您应该使用JavaScript来处理此功能。也就是说,您可以通过将具有ID的元素定位到您的锚点来实现此目的:

Method 1: Pure 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>

---

Method 2: JavaScript Toggle

A better way all around would be to use JavaScript like this:

更好的方法是使用这样的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>

#2

:active only works when the mouse is pressed down. The way it would work is to apply it to a parent of the table like below, although it won't work for what you're wanting it to do.

:active仅在按下鼠标时有效。它的工作方式是将它应用到表的父级,如下所示,尽管它不适用于你想要它做的事情。

#addForm {
  display: none;
}
#addFormContainer:active #addForm {
  display: table;
}
#addFormContainer:active p {
  display: none;
}
#addFormContainer p {
  cursor: pointer;
}

<div id="addFormContainer">
  <p>Click to load form</p>
  <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>
</div>

Perhaps it might be better for you to use :hover instead:

也许你可能更好用:hover代替:

#addForm {
  display: none;
}
#addFormContainer:hover #addForm {
  display: table;
}
#addFormContainer:hover p {
  display: none;
}
#addFormContainer p {
  cursor: pointer;
}

<div id="addFormContainer">
  <p>Hover to load form</p>
  <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>
</div>

#3

Here are some CSS examples for you which is pretty much the best you are going to get:

以下是一些CSS示例,它们是您将获得的最佳示例:

Firstly notice my HTML structure, the only way you are going to get this to work is to next your table inside your anchor tag, this is poor HTML.

首先注意我的HTML结构,你要让它工作的唯一方法是在你的锚标签中找到你的桌子,这是糟糕的HTML。

Using :active to show the form, this shows the form when you click but there is nothing to keep the form displaying, so you have to hold the click down meaning you can't use the form. (this is explained in the question you link to). https://jsfiddle.net/yLcq3ohq/

使用:active来显示表单,这会在您单击时显示表单,但没有任何内容可以保持表单显示,因此您必须按住单击意味着您无法使用表单。 (这在您链接的问题中有解释)。 https://jsfiddle.net/yLcq3ohq/

HTML:

<a href="#" title="reveal form" >Reveal Form

    <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>
</a>

CSS: a { height: 20px; display: inline-block; overflow: hidden; }

CSS:a {身高:20px; display:inline-block;溢出:隐藏; }

a:active {
    height: auto;
}

This second option is again using poorly formed HTML and :hover this allows your to use the form but it will only be displayed while you hover over it. https://jsfiddle.net/yLcq3ohq/1/

第二个选项是再次使用格式不正确的HTML和:悬停,这允许您使用表单,但只有当您将鼠标悬停在表单上时才会显示。 https://jsfiddle.net/yLcq3ohq/1/

HTML:

<a href="#" title="reveal form" >Reveal Form

    <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>
</a>

a {
    height: 20px;
    display: inline-block;
    overflow: hidden;
}

CSS:

a:hover {
    height: auto;
}

From what I can see you cannot achieve what you want to do without JavaScript.

从我所看到的,如果没有JavaScript,你就无法实现你想做的事情。