javascript - 使用 CSS 隐藏/显示 block

Question

以前的一位开发人员构建了一个网页，上面有一个女人和一些数字，点击以显示与 body 部位相关的服务。您可以在此处查看当前页面...

http://dermanaissance.com/nos-solutions/

我的问题是他使用 CSS VS 使用 JS 或 Jquery 构建了解决方案。当使用他已经完成的操作单击特定 block 时，我试图隐藏其他 block ，但恐怕仅使用 CSS 是不可能的。

我不太确定如何在不使用 Jquery 的情况下解决这个问题，因为这通常是我处理这个问题的方法，有什么想法吗？

这是现在的代码...

<div id="anchor-1" class="nos-anchor">1
    <span class="nos-block">
        <span class="nos-line">&nbsp;</span>
        <ul>
            <li><a href="/lift-sans-chirurgie/">Lift Sans Chirurgie</a></li>
            <li><a href="/attenuation-des-rides/">Atténuation des Rides</a></li>
            <li><a href="/contour-des-yeux/">Contour des Yeux</a></li>
            <li><a href="/double-menton/">Double-menton</a></li>
            <li><a href="/bajoues/">Bajoues</a></li>
            <li><a href="/relachement-du-cou/">Relâchement du Cou</a></li>
            <li><a href="/ouverture-du-regard/">Ouverture du Regard</a></li>
            <li><a href="/augmentation-du-volume/">Augmentation du Volume</a></li>
            <li><a href="/amelioration-du-teint-de-la-peau/">Amélioration du Teint de la Peau</a></li>
            <li><a href="/acne-actif/">Acné Active</a></li>
            <li><a href="/cicatrice-dacne/">Cicatrices d’Acné</a></li>
            <li><a href="/decollete/">Décolleté</a></li>
            <li><a href="/attenuation-des-cicatrices/">Atténuation des Cicatrices</a></li>
            <li><a href="/photorajeunissement/">Photorajeunissement</a></li>
            <li><a href="/taches-pigmentaires-et-melasma/">
Taches pigmentaires et Mélasma</a></li>
            <li><a href="/couperose-et-rosacee/">Couperose et Rosacée</a></li>
            <li><a href="/varicosites/">Varicosités</a></li>
        </ul>
    </span>
</div>

以及使该解决方案起作用的 CSS...

.page-id-9 #main-content .nos-anchor {
position: absolute;
display: block;
z-index: 9;}

.page-id-9 #main-content .nos-anchor .nos-block {
position: absolute;
display: none;}

.page-id-9 #main-content .nos-anchor .nos-block a {
display: block;}

.page-id-9 #main-content .nos-anchor .nos-line {
display: block;
position: absolute;
top: 20px;}

Answer 1

如果您想要纯 CSS 解决方案，我建议您查看 Target psuedo 元素，否则 -

这是一个纯 javascript 解决方案。只需给您要隐藏和显示的 div 一个 ID，然后使用 onclick="hideShow(sectionID);"通过可点击对象调用它们

<div style="height:40px; width:40px; background:red;" onclick="hideShow('div1')">
  <div id="div1" style="display:none; background:orange; width:15px; height:15px;"></div>
</div>
<div style="width:40px; height:40px; background:yellow;" onclick="hideShow('div2')">
  <div id="div2" style="display:none; background:green; width:15px; height:15px;"></div>
  <div></div>
</div>
<div style="width:40px; height:40px; background:blue;" onclick="hideShow('div3')">
  <div id="div3" style="display:none; background:purple; width:15px; height:15px;"></div>
  <div></div>
</div>

var currrentElementShowing;

function hideShow(sectionID) {
  if (document.getElementById(sectionID) != currrentElementShowing) {
    document.getElementById(sectionID).style.display = "block";
    if (currrentElementShowing != undefined) {
      currrentElementShowing.style.display = "none";
    }
    currrentElementShowing = document.getElementById(sectionID);
  } else {

  }
}

https://jsfiddle.net/cxjndqzu/