单击锚标记时显示表单

时间：2015-05-11 09:36:15

标签： html css

我想做this之类的内容，而不是table - 而不是div - 代码。

如果我使用: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;
}

3 个答案:

答案 0 :(得分：3)

理想情况下，您应该使用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>

答案 1 :(得分：0)

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

＆＃13;
＆＃13; 
#addForm {
  display: none;
}
#addFormContainer:active #addForm {
  display: table;
}
#addFormContainer:active p {
  display: none;
}
#addFormContainer p {
  cursor: pointer;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

或许最好使用:hover代替：

＆＃13;
＆＃13; 
#addForm {
  display: none;
}
#addFormContainer:hover #addForm {
  display: table;
}
#addFormContainer:hover p {
  display: none;
}
#addFormContainer p {
  cursor: pointer;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

以下是一些CSS示例，您将获得最佳效果：

首先注意我的HTML结构，你要使用它的唯一方法就是在你的锚标记中找到你的table，这是糟糕的HTML。

使用: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：     一个 {         身高：20px;         display：inline-block;         溢出：隐藏;     } 

a:active {
    height: auto;
}

这第二个选项再次使用格式不正确的HTML和:hover这允许您使用该表单，但只有当您将鼠标悬停在表单上时才会显示该表单。 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;
}

从我所看到的，如果没有JavaScript，你就无法实现自己的目标。

相关问题
最新问题