Question

之前的开发人员构建了一个网页，其上有一个女人和数字，点击该网页以显示与bodypart相关的服务。你可以在这里看到当前的页面......

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

我的问题是他使用JS或Jquery用CSS VS构建了解决方案。我正在尝试使用已经完成的操作隐藏其他块时，但我担心只能使用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

哇“page-id-9”是非常糟糕的命名惯例（我知道你没有这样做，但是人！）。

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

“ToggleClass”
“有效”

您可以为所有列表项指定“ToggleClass”。使用CSS，您可以创建“活动”类的“ToggleClass”项目，以显示您想要的方式。没有“活动”类的“ToggleClass”项目将根据您的需要隐藏。

然后，使用jQuery（抱歉，但我认为必须这样做），请执行以下功能：

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

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

发表评论，让我知道这对你有什么用 - 祝你好运！

Answer 2

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

这是一个纯粹的JavaScript解决方案。只需给你隐藏的div并显示一个ID，并使用onclick =＆＃34; hideShow（sectionID）;＆＃34;用可点击的对象调用它们。

<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/

Answer 3

查看了您的网页后，您可以应用此类内容。您必须使用纯Javascript或Jquery。既然你提到了JQuery作为你的偏好：

HTML

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

JS

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

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

});

这里的想法是使用Jquery的toggleClass方法并检查click元素是否具有active类，以及它是否隐藏了其他元素。这应该引导你朝正确的方向发展

Fiddle

使用CSS隐藏/显示块

3 个答案: