Home / Questions / 13182
Accepted
Alvaro Montoro
Asked: 2020-06-08 20:37:42 +0800 CST 2020-06-08 20:37:42 +0800 CST

根据列表中的选定值更新文本 *WITHOUT JAVASCRIPT*

  • 772

在工作中，我们遇到了一个有趣的问题：我们有一个页面上有一个下拉列表，当所选选项更改时，从JSON变量的值中更新一系列项目的值。

HTML 是这样的（简化）：

<select id="paises">
  <option value="chile">Chile</option>
  <option value="colombia">Colombia</option>
  <option value="ecuador">Ecuador</option>
</select>

<div id="valores">
  Pais: <span id="pais"></span><br/>
  Teléfono: <span id="telefono"></span><br/>
  Email: <span id="email"></span>
</div>

JSON 是这样的（简化的）：

info = {
    "chile": {
        "nombre": "Chile",
        "telefono": "123456789",
        "email": "[email protected]"
    },
    "colombia": {
        "nombre": "Colombia",
        "telefono": "192837465",
        "email": "[email protected]"
    },
    "ecuador": {
        "nombre": "Ecuador",
        "telefono": "987654321",
        "email": "[email protected]"
    }
}

JavaScript 代码与问题无关，但想法很简单：根据所选国家/地区，span. 例如，如果选择智利，spanid 为“country”的将包含“Chile”，spanid 为“phone”的将显示“123456789”等。

现在该页面已移至新的 CMS，并且由于各种原因，我们可以使用的组件受到限制，并且它们都不允许我们嵌入 JavaScript（甚至不能嵌入），它们只允许我们嵌入 HTML 和 CSS。

所以问题是：如何模拟上述行为，但只使用 HTML+CSS 而没有任何 JavaScript 或 JSON？

关于 HTML 和 CSS，我们没有任何限制：我们可以根据需要重新排序/排列元素，我们可以添加新元素/删除现有元素，我们可以添加任意数量的代码......只要它不包含任何脚本，只是 HTML 和 CSS。

例如，我们终于找到了一个解决方案（我将在下面的答案中分享以获取灵感），将 替换select为 list ul，将 JSON 转换为 CSS（使用:beforeand content）并使用一系列input隐藏的 s ......但是问题是它占用了太多空间，我们想知道是否会有不同的方法。

html

3 Answers

  1. Best Answer

    虽然是一个巧妙的解决方案，而不是空间问题，但我看到了两个缺点：

    • 维护起来有些复杂：您将内容放入样式中，因此需要修改信息的地方更多。
    • 难以访问：作为风格的一部分，数据没有被搜索引擎索引，它不是“可感知的”（例如：它不能被自动阅读器读取），更糟糕的是，它不能被复制，这是对数据联系。

    我建议你把你的建议转过来，把信息留在 html 正文中。像这样的东西：

    div#paises > div { display: none; }
#chile:checked~ div#chile { display: block; }
#colombia:checked~ div#colombia { display: block; }
#ecuador:checked~ div#ecuador { display: block; }
    <ul id="dropdown">
    <li>
      Selecciona un país
      <ul>
        <li><label for="chile">Chile</label></li>
        <li><label for="colombia">Colombia</label></li>
        <li><label for="ecuador">Ecuador</label></li>
      </ul>
    </li>
</ul>

<div id="paises">
      <input type="radio" name="paises" id="chile" />
      <input type="radio" name="paises" id="colombia" />
      <input type="radio" name="paises" id="ecuador" />
      <div id="chile">
        País: Chile <br/>
        Teléfono: 123456789 <br/>
        Email: [email protected]
      </div>
      <div id="colombia">
        País: Colombia <br/>
        Teléfono: 987654321 <br/>
        Email: [email protected]
      </div>
      <div id="ecuador">
        País: Ecuador <br/>
        Teléfono: 192837465 <br/>
        Email: [email protected]
      </div>
</div>

    • 8

  2. 这是我们找到的解决方案（我把它留在这里，以防它帮助人们看到我们正在寻找的东西和/或作为参考），尽管它的问题是它变得非常复杂（列表country 不仅是 3 个，而是 30 个），最终需要大量额外的代码。

    当然可以用:target代替来做一些事情:checked，它会简化事情（你可以全部更改label为a并避免所有复选框）。

    思路如下：

    • 在 HTML 中：
      • 我们使用;删除select并模拟一个下拉列表。ul
      • 我们在要更新的字段之前为每个国家添加一个input类型；radio
      • 在每个中li，我们为我们在上一步中创建的每个ul添加一个；labelinput
    • 在 CSS 中：
      • 我们添加不同的样式来模拟下拉；
      • 使用伪类:checked和选择器~，我们添加 CSS 规则，这些规则将根据当前选择的半径添加内容。

    代码最后看起来像这样：

    #dropdown, #dropdown > li > ul  { 
  width:200px; 
  overflow:visible;
  line-height:20px; 
  border:1px solid gray;
  background:white;
  list-style:none;
  padding-left:0;
  margin-left:0;
  position:relative;
}

#dropdown:after {
  content:"\25bc";
  position:absolute;
  font-size:0.75em;
  right:2px;
  top:0;
}

#dropdown > li { 
  margin-left:0; 
  line-height:20px;
  font-size:0.9em;
}

#dropdown > li > ul {
  display:none;
}


#dropdown > li:hover > ul {
  display:block;  
  position:absolute;
  left:-1px;
}

#dropdown > li > ul > li {
  margin-left:0; 
  line-height:20px;
  padding-left:2px;
}

#dropdown > li > ul > li:hover {
  background-color:rgba(0,0,0,0.05);
}

#dropdown > li > ul > li label {
  display:block;
}

input[name="paises"] { display:none; }


#chile:checked ~ #pais:before { content:"Chile"; }
#chile:checked ~ #telefono:before { content:"123456789"; }
#chile:checked ~ #email:before { content:"[email protected]"; }
#colombia:checked ~ #pais:before { content:"Colombia"; }
#colombia:checked ~ #telefono:before { content:"987654321"; }
#colombia:checked ~ #email:before { content:"[email protected]"; }
#ecuador:checked ~ #pais:before { content:"Ecuador"; }
#ecuador:checked ~ #telefono:before { content:"192837465"; }
#ecuador:checked ~ #email:before { content:"[email protected]"; }
    <ul id="dropdown">
  <li>
    Selecciona un país
    <ul>
      <li><label for="chile">Chile</label></li>
      <li><label for="colombia">Colombia</label></li>
      <li><label for="ecuador">Ecuador</label></li>
    </ul>
  </li>
</ul>

<div>
  <input type="radio" name="paises" id="chile" />
  <input type="radio" name="paises" id="colombia" />
  <input type="radio" name="paises" id="ecuador" />
  País: <span id="pais"></span><br/>
  Teléfono: <span id="telefono"></span><br/>
  Email: <span id="email"></span>
</div>

    • 6

  3. 仅使用 :target 选择器，可以稍微简化一下。

    body {background: #f3f5f6;}
ul {
    margin: 0;
    list-style: none;
    padding: 0;
    width: 200px;
}
ul#dropdown {float: left;}
ul#dropdown li {
    position: relative;
    line-height:30px;
    z-index: 10;
    background: white;
    text-indent: 10px;
    border-top: 1px solid #eee;
}
ul#dropdown > li:before {
    content: "";
    border-color: #7d7d7d;
    border-style: solid;
    border-width: 0 1px 1px 0;
    width: 6px;
    height: 6px;
    position: absolute;
    right: 15px;
    top: 11px;
    transform: rotate(45deg);
    z-index: 100;
}
ul#dropdown > li:hover:before {transform: rotate(-135deg);top: 13px;}
ul#dropdown li a {display: block;}
ul#dropdown ul {display: none;}
ul#dropdown li:hover ul {display: block;}
ul#dropdown ul li:hover {background: #eee;}
div#paises {float: left;}
div#paises > div {
    background: white;
    width: 200px;
    margin-left: 10px;
    padding: 15px;
    display: none;
}
:target {display: block !important;}
    <ul id="dropdown">
  <li>Selecciona un país
    <ul class="selector">
      <li><a href="#chile">Chile</a></li>
      <li><a href="#colombia">Colombia</a></li>
      <li><a href="#ecuador">Ecuador</a></li>
    </ul>
  </li>
</ul>

<div id="paises">
  <div id="chile">
    País: Chile <br/>
    Teléfono: 123456789 <br/>
    Email: [email protected]
  </div>
  <div id="colombia">
    País: Colombia <br/>
    Teléfono: 987654321 <br/>
    Email: [email protected]
  </div>
  <div id="ecuador">
    País: Ecuador <br/>
    Teléfono: 192837465 <br/>
    Email: [email protected]
  </div>
</div>

    • 4