Javascript 使用CSS隐藏/显示块

以前的一位开发人员创建了一个网页，上面有一名女性和数字，可以单击以显示与身体部位相关的服务。你可以在这里看到当前页面

我这里的问题是，他使用CSS和JS或Jquery构建了解决方案。我试图隐藏其他块时，一个特定的块已被点击使用他已经做了，但恐怕不可能只使用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>

哇，“page-id-9”是一个非常糟糕的命名约定（我知道你没有这么做，但是伙计！）

所以，我要做的是创建两个CSS类：

• “切换类”
• “活动”

您将为所有列表项分配“ToggleClass”。使用CSS，您可以使同样具有“活动”类的“ToggleClass”项显示您想要的方式。没有“活动”类的“ToggleClass”项将按照您的意愿隐藏

然后，使用jQuery（很抱歉，但我认为必须这样做），生成以下函数：

$(document).ready(function(){
    $(".ToggleClass").on("click", function(){
        $(".ToggleClass").removeClass("Active");
        $(this).addClass("Active");
    });
});

只要有人单击“ToggleClass”元素，就会触发此事件。首先，它从所有具有“ToggleClass”的元素中删除“Active”类（这确保不会同时具有两个具有“Active”类的元素）。接下来，它将“Active”类添加到单击的元素中

请留下评论，让我知道这是如何为你工作的-祝你好运

Wow“page-id-9”是一个非常糟糕的命名约定（我知道你没有这么做，但是伙计！）

所以，我要做的是创建两个CSS类：

• “切换类”
• “活动”

您将为所有列表项分配“ToggleClass”。使用CSS，您可以使同样具有“活动”类的“ToggleClass”项显示您想要的方式。没有“活动”类的“ToggleClass”项将按照您的意愿隐藏

然后，使用jQuery（很抱歉，但我认为必须这样做），生成以下函数：

$(document).ready(function(){
    $(".ToggleClass").on("click", function(){
        $(".ToggleClass").removeClass("Active");
        $(this).addClass("Active");
    });
});

只要有人单击“ToggleClass”元素，就会触发此事件。首先，它从所有具有“ToggleClass”的元素中删除“Active”类（这确保不会同时具有两个具有“Active”类的元素）。接下来，它将“Active”类添加到单击的元素中

---

请留下评论，让我知道这是如何为你工作的-祝你好运

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

这里是一个纯javascript解决方案。只需给隐藏和显示的div一个ID，并使用onclick=“hideShow（sectionID）；”使用可单击对象调用它们

var电流元件显示；
函数隐藏（sectionID）{
if（document.getElementById（sectionID）！=currentElementShowing）{
document.getElementById（sectionID）.style.display=“block”；
if（currentElementShowing！=未定义）{
CurrentElementShowing.style.display=“无”；
}
CurrentElementShowing=document.getElementById（sectionID）；
}否则{
}
}

---

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

这里是一个纯javascript解决方案。只需给隐藏和显示的div一个ID，并使用onclick=“hideShow（sectionID）；”使用可单击对象调用它们

var电流元件显示；
函数隐藏（sectionID）{
if（document.getElementById（sectionID）！=currentElementShowing）{
document.getElementById（sectionID）.style.display=“block”；
if（currentElementShowing！=未定义）{
CurrentElementShowing.style.display=“无”；
}
CurrentElementShowing=document.getElementById（sectionID）；
}否则{
}
}

---

查看页面后，您可以应用以下内容。您必须使用纯Javascript或Jquery。既然您提到首选JQuery：

html

这里的想法是使用Jquery的

toggleClass

方法，检查click元素是否有

活动的
类，以及它是否隐藏了其他元素。这将引导你朝着正确的方向前进

查看页面后，您可以应用以下内容。您必须使用纯Javascript或Jquery。既然您提到首选JQuery：

html

这里的想法是使用Jquery的
toggleClass
方法，检查click元素是否有
活动的
类，以及它是否隐藏了其他元素。这将引导你朝着正确的方向前进

这里有问题吗……听起来你想让我们为你写这篇文章……但事实并非如此。@Paulie\u D不，我只是想得到一些指导，如果我在CSS方面没有看到一些东西，听起来像是我最初的计划（用JS/Jquery重写）可能就是这样，如下所示。@EmmanuelHenri下面的答案有帮助吗？如果是这样，请告诉我们。@gregdevs是的，所有3种解决方案都是我一直在思考的方法，但最终使用了类似于Benneb10的方法。谢谢大家确认我的疑问，如果没有一些JS或Jquery，我就无法继续这篇文章。这里有一个问题……听起来你想让我们为你写这篇文章……这不是你的目的。@Paulie_D不，我只是想得到一些指导，如果CSS方面有什么我没有看到的，听起来像是我最初的计划（用JS/Jquery重写）可能就是这样，如下所示。@EmmanuelHenri下面的答案有帮助吗？如果是这样，请告诉我们。@gregdevs是的，所有3个解决方案都是我一直在思考的方法，但最终使用了类似于Benneb10的方法。谢谢大家确认我的疑问，没有一些JS或Jquerywhy，就不能继续这个问题。当jquery的ToggleClass（）出现时，你为什么要创建一个ToggleClass类方法会起作用并且是明确的？@Cruiser ToggleClass不会起作用，因为您需要从一个元素中删除“活动”类
<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 {

  }
}

<div>
    <div class="pill">1</div>
</div>
<div>
    <div class="pill">2</div>
</div>

$('.pill').click(function(){
    $(this).toggleClass('active')

    if ($(this).hasClass('active')){
     $('.pill').not(this).fadeOut(200)
   }else{
     $('.pill').not(this).fadeIn(200)
   }

});