Question

我有 3 个 div，它们绝对位于父 div 内。除了第一个 div 之外，它们的不透明度都为 0。当我点击一个链接时，我希望相应的 div 的不透明度为 1，所有其他 div 的不透明度为 0。

我给了链接和 div 一个匹配的数据属性，以便它们配对。

我尝试给匹配的 div 一个类，但我不知道如何从所有其他 div 中删除该类..如果它已经有这个类，我不希望它继续添加它。

$(document).ready(function() {
  $(".div_open").on("click", function() {
    var target = $(this).data("div");

    if ($("#" + target).hasClass("show")) {
      $("#" + target).removeClass("show");
      $("#" + target).addClass("hide");
    } else {
      $("#" + target).removeClass("hide");
      $("#" + target).addClass("show");
    }
  });
});

.div-wrap {
  background-color: #c6c8ca;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  height: 400px;
}

.div-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.div-content:not(:first-of-type) {
  opacity: 0;
}

.div-content.show {
  opacity: 1;
}

.div-content.hide {
  opacity: 0;
}

.div-content:nth-of-type(1) {
  color: green;
  display: block;
}

.div-content:nth-of-type(2) {
  color: blue;
  display: none;
}

.div-content:nth-of-type(3) {
  color: purple;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-names">
  <a href="#" class="div_open" data-div="div-1">Div One</a>
  <a href="#" class="div_open" data-div="div-2">Div Two</a>
  <a href="#" class="div_open" data-div="div-3">Div Three</a>
</div>

<div class="div-wrap">
  <div class="div-content" data-div="div-1" id="div-1">
    <h3>This is div one, the others are hidden. Click a link to display a different div.</h3>
  </div>
  <div class="div-content" data-div="div-2" id="div-2">
    <h1>This is div two, one and three are hidden, click another link.</h1>
  </div>
  <div class="div-content" data-div="div-3" id="div-3">
    <h1>This is div three, two and one are hidden, click another link.</h1>
  </div>
</div>

Answer 1

首先，您在 css 和 jquery 中都执行了不必要的操作。我编辑了你的css。此外，我编辑了您的 jquery 代码，删除了对 show 和 hide 类是否存在的检查，从除当前 hide 之外的所有类中删除了 div-content 类，添加了属性 show 的当前 div-content 的 data-div 类：

$(".div-content").removeClass("show");
$(".div-content[data-div='"+target+"']").addClass("show");

hide 类不是必需的。所以这个类替换了这个css：

.div-content {
    opacity: 0;
    display: none;
}

另外，请注意类 show 现在默认添加到 html，而不是 .div-content: nth-of-type (1) {}：

<div class="div-content show" data-div="div-1" id="div-1">

完整代码：

$(document).ready(function () {
    $(".div_open").on("click", function () {
        var target = $(this).data("div");

        $(".div-content").removeClass("show");
        $(".div-content[data-div='" + target + "']").addClass("show");
    });
});

.div-wrap {
    background-color: #c6c8ca;
    padding-top: 20px;
    padding-bottom: 20px;
    position: relative;
    height: 400px;
}

.div-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.div-content {
    opacity: 0;
    display: none;
}

.div-content.show {
    opacity: 1;
    display: block;
}

.div-content:nth-of-type(1) {
    color: green;
}
.div-content:nth-of-type(2) {
    color: blue;
}
.div-content:nth-of-type(3) {
    color: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="div-names">
    <a href="#" class="div_open" data-div="div-1">Div One</a>
    <a href="#" class="div_open" data-div="div-2">Div Two</a>
    <a href="#" class="div_open" data-div="div-3">Div Three</a>
</div>

<div class="div-wrap">
    <div class="div-content show" data-div="div-1" id="div-1">
        <h3>This is div one, the others are hidden. Click a link to display a different div.</h3>
    </div>
    <div class="div-content" data-div="div-2" id="div-2">
        <h1>This is div two, one and three are hidden, click another link.</h1>
    </div>
    <div class="div-content" data-div="div-3" id="div-3">
        <h1>This is div three, two and one are hidden, click another link.</h1>
    </div>
</div>

Answer 2

我只是更改了一些代码，包括将 hide/show 类添加到 div 和 jQuery 选择器。

$(document).ready(function () {
    $(".div_open").on("click", function () {
      var target = $(this).data("div");
      $('.div-content').each(function(i, obj) {
          if ($(obj).attr('id') == target) {
              $(obj).removeClass("hide");
              $(obj).addClass("show");
          } else {
              $(obj).removeClass("show");
              $(obj).addClass("hide");
          }
       });
    });
});

.div-wrap {
  background-color: #c6c8ca;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  height: 400px;
}

.div-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.div-content:not(:first-of-type) {
  opacity: 0;
}

.div-content.show {
  opacity: 1;
  display:block!important;
}

.div-content.hide {
  opacity: 0;
  display:none!important;
}

.div-content:nth-of-type(1) {
  color: green;
  display: block;
}
.div-content:nth-of-type(2) {
  color: blue;
  display: none;
}
.div-content:nth-of-type(3) {
  color: purple;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="div-names">
  <a href="#" class="div_open" data-div="div-1">Div One</a>
  <a href="#" class="div_open" data-div="div-2">Div Two</a>
  <a href="#" class="div_open" data-div="div-3">Div Three</a>
</div>

<div class="div-wrap">
  <div class="div-content" data-div="div-1" id="div-1">
    <h3>This is div one, the others are hidden. Click a link to display a different div.</h3>
  </div>
  <div class="div-content hide" data-div="div-2" id="div-2">
    <h1>This is div two, one and three are hidden, click another link.</h1>
  </div>
  <div class="div-content hide" data-div="div-3" id="div-3">
    <h1>This is div three, two and one are hidden, click another link.</h1>
  </div>
</div>

Answer 3

试试这个它的工作

<div class="div-wrap">
  <div class="div-content show" data-div="div-1" id="div-1">
    <h3>1</h3>
  </div>
  <div class="div-content hide" data-div="div-2" id="div-2">
    <h1>2</h1>
  </div>
  <div class="div-content hide" data-div="div-3" id="div-3">
    <h1>3</h1>
  </div>
</div>

$(document).ready(function() {
      $(".div_open").on("click", function() {
        var target = $(this).data("div");
        console.log(target);
        if ($("#" + target).hasClass("show")) {
          
          $("#" + target).removeAttr('class');
          $("#" + target).attr('class','div-content hide');
          
        } else {

              
          $(".div-content").removeClass("show");
          $(".div-content").addClass("hide");
          $("#" + target).removeAttr('class');
          $("#" + target).attr('class','div-content show');
        }
      });
});

删除此样式

.div-content:not(:first-of-type) {
  opacity: 0;
}

.div-content.show {
  opacity: 1;
}

.div-content.hide {
  opacity: 0;
}

Answer 4

function onClickDivOne() {
    $("#div1").show();
    $("#div2").hide();
    $("#div3").hide();
 }

function onClickDivTwo() {
    $("#div1").hide();
    $("#div2").show();
    $("#div3").hide();
 }

function onClickDivThree() {
  $("#div1").hide();
    $("#div2").hide();
    $("#div3").show();
}

.div-wrap {
  background-color: #c6c8ca;
  padding-top: 20px;
  padding-bottom: 20px;
  position: relative;
  height: 400px;
}

.div-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="div-names">
  <a href="#" class="div_open" onClick="onClickDivOne()">Div One</a>
  <a href="#" class="div_open" onClick="onClickDivTwo()">Div Two</a>
  <a href="#" class="div_open" onClick="onClickDivThree()">Div Three</a>
</div>

<div class="div-wrap">
  <div class="div-content" id="div1">
    <h3>This is div one, the others are hidden. Click a link to display a different div.</h3>
  </div>
  <div class="div-content" id="div2">
    <h3>This is div two, one and three are hidden, click another link.</h3>
  </div>
  <div class="div-content" id="div3">
    <h3>This is div three, two and one are hidden, click another link.</h3>
  </div>
</div>

如何将一个类添加到一个 div 但从其他 div 中删除？

4 个答案: