html 动态列表，无需JavaScript或重新加载页面

ecr0jaav 于 12个月前发布在 Java

关注(0)|答案(1)|浏览(140)

我有一个网站，应该能够在没有任何JavaScript执行，
现在，我想用某种方式CSS和HTML显示一个列表与用户输入字段。在列表的底部应该有一个按钮，用于添加一个新的输入字段在列表的底部。
我知道css可以通过设置display：none来动态显示或隐藏html div
我的想法是呈现一个已经有100个条目的列表，但只有10个是可见的。用户可以通过单击列表底部的底部来“添加”新元素。
添加按钮应设置为不可见，列表中的下一个条目和下一个“添加”按钮应显示为可见。
所以它不是一个真正的动态列表，而是一个最多有100个条目的列表，这对我的用例来说应该足够了。

Html

来源：https://stackoverflow.com/questions/77713432/dynamic-list-without-javascript-or-realoading-the-page

1条答案

按热度按时间

njthzxwz1#

你可以使用：checked in CSS3，这里有一个例子
但这不是一个好方法，最好使用JavaScript。否则，如果您以后要添加新项目，则需要不断更改代码。
超文本标记语言：

<html>
  <div id="one">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  </div>

  <input type = "checkbox" id = "show11">
  <label id = "add11" for = "show11" >add</label>
  
  <div id="eleven">
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
  </div>

    <input type = "checkbox" id = "show21">
    <label id = "add21" for = "show21" >add</label>  

</html>

字符串
CSS：

#eleven,#show11,#show21,#add21{
  display: none;
}

#show11:checked ~ #eleven {
  display: block;
}

#show11:checked ~ #add11 {
  display: none;
}

#show11:checked ~ #add21 {
  display: block;
}

型

赞(0）回复(0）举报 12个月前

我来回答

html 动态列表，无需JavaScript或重新加载页面

1条答案

相关问题

热门标签

最新问答