Показать форму при нажатии на якорный тег

Question

Я хочу сделать что-то вроде this, но до 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; 
} 

Answer 1

В идеале вы должны использовать JavaScript для обработки этой функции.Это, как сказал, что вы можете сделать это путем пристреливать элемент, который имеет идентификатор с якоря, как это:

Метод 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 Toggle

Лучшим способом было бы использовать 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>

Answer 2

: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>

Возможно, это могло бы быть лучше для вас, чтобы использовать :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>

Answer 3

Вот некоторые примеры 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; дисплей: встроенный блок; переполнение: скрыто; }

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.