Блог

Я разрабатываю приложение без javascript. Концепция не-js.

Поэтому у меня есть раздел комментариев для ответа.

это и есть кнопка.

 <a href='#reply1'>
   Reply button
</a>
 

Форма ответа.

 <form id='reply1'>
  <p>
    A reply form
  </p>
</form>
 

и это мой стиль.

 <style>
  #reply1 {
    display: none;
  }

  #reply1:target {
    display: block;
  }
</style>
 

В настоящее время он работает очень хорошо, когда я нажимаю кнопку «Ответить», появляется форма ответа.

Но в моем случае идентификатор будет динамическим. У каждой формы будет свой идентификатор, и для каждой формы будет кнопка с тем же идентификатором, что и у формы.

Я слышал, что это может быть реализовано с помощью css wilcard или каким-то другим способом. Я не знаю, как это сделать. Кто-нибудь может мне помочь с этим?

попробуй это.

Если вы хотите применить свой стиль к нескольким элементам, то выбор класса является опцией.

 .reply-form {
  display: none;
}

.reply-form:target {
  display: block;
} 

 <a href='#reply1'>Reply buttion1</a><br/>
<a href='#reply2'>Reply buttion2</a><br/>
<a href='#reply3'>Reply buttion3</a><br/>


<form id='reply1' class="reply-form">
  <p>A reply form1</p>
</form>

<form id='reply2' class="reply-form">
  <p>A reply form2</p>
</form>

<form id='reply3' class="reply-form">
  <p>A reply form3</p>
</form> 

Вам нужно использовать class атрибут.

 <style>
  .reply {
    display: none;
  }

  .reply:target {
    display: block;
  }
</style>
 

Теперь, независимо от того, что id вы используете, пока вы не упомянете class="reply" , стили будут добавлены

 <form id='reply1' class="reply">
  <p>
    A reply form
  </p>
</form>

<form id='reply2' class="reply">
  <p>
    A reply form
  </p>
</form>
 

В приведенном выше примере css ответа будет добавлен как id="reply1" к id="reply2"