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

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

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

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

$（文档）.ready（函数（）{
$（“.div_open”）。在（“单击”，函数（）{
var目标=$（此）.data（“div”）；
if（$（“#“+目标）.hasClass（“显示”））{
$（“#”+target）.removeClass（“show”）；
$（“#”+target）.addClass（“隐藏”）；
}否则{
$（“#”+target）.removeClass（“隐藏”）；
$（“#”+target）.addClass（“show”）；
}
});
});
.div wrap{
背景色：#c6c8ca；
填充顶部：20px；
垫底：20px；
位置：相对位置；
高度：400px；
}
.div内容{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.div内容：非（：类型的第一个）{
不透明度：0；
}
.div-content.show{
不透明度：1；
}
.div-content.hide{
不透明度：0；
}
.div内容：第n个类型（1）{
颜色：绿色；
显示：块；
}
.div内容：第n个类型（2）{
颜色：蓝色；
显示：无；
}
.div内容：第n个类型（3）{
颜色：紫色；
显示：无；
}

这是第一分区，其他的都隐藏起来了。单击链接以显示不同的div。
这是第二分区，第一分区和第三分区被隐藏，请单击另一个链接。
这是第三分区，第二分区和第一分区被隐藏，请单击另一个链接。
我刚刚更改了一些代码，包括将
隐藏
/
显示
类添加到
div
和jQuery选择器中


$（文档）.ready（函数（）{
$（“.div_open”）。在（“单击”，函数（）{
var目标=$（此）.data（“div”）；
$（'.div content'）。每个（函数（i，obj）{
if（$（obj）.attr（'id'）==目标）{
$（obj）.removeClass（“隐藏”）；
$（obj）.addClass（“show”）；
}否则{
$（obj）.removeClass（“show”）；
$（obj）.addClass（“隐藏”）；
}
});
});
});
.div wrap{
背景色：#c6c8ca；
填充顶部：20px；
垫底：20px；
位置：相对位置；
高度：400px；
}
.div内容{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.div内容：非（：类型的第一个）{
不透明度：0；
}
.div-content.show{
不透明度：1；
显示：块！重要；
}
.div-content.hide{
不透明度：0；
显示：无！重要；
}
.div内容：第n个类型（1）{
颜色：绿色；
显示：块；
}
.div内容：第n个类型（2）{
颜色：蓝色；
显示：无；
}
.div内容：第n个类型（3）{
颜色：紫色；
显示：无；
}

这是第一分区，其他的都隐藏起来了。单击链接以显示不同的div。
这是第二分区，第一分区和第三分区被隐藏，请单击另一个链接。
这是第三分区，第二分区和第一分区被隐藏，请单击另一个链接。
我刚刚更改了一些代码，包括将
隐藏
/
显示
类添加到
div
和jQuery选择器中


$（文档）.ready（函数（）{
$（“.div_open”）。在（“单击”，函数（）{
var目标=$（此）.data（“div”）；
$（'.div content'）。每个（函数（i，obj）{
if（$（obj）.attr（'id'）==目标）{
$（obj）.removeClass（“隐藏”）；
$（obj）.addClass（“show”）；
}否则{
$（obj）.removeClass（“show”）；
$（obj）.addClass（“隐藏”）；
}
});
});
});
.div wrap{
背景色：#c6c8ca；
填充顶部：20px；
垫底：20px；
位置：相对位置；
高度：400px；
}
.div内容{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.div内容：非（：类型的第一个）{
不透明度：0；
}
.div-content.show{
不透明度：1；
显示：块！重要；
}
.div-content.hide{
不透明度：0；
显示：无！重要；
}
.div内容：第n个类型（1）{
颜色：绿色；
显示：块；
}
.div内容：第n个类型（2）{
颜色：蓝色；
显示：无；
}
.div内容：第n个类型（3）{
颜色：紫色；
显示：无；
}

这是第一分区，其他的都隐藏起来了。单击链接以显示不同的div。
这是第二分区，第一分区和第三分区被隐藏，请单击另一个链接。
这是第三分区，第二分区和第一分区被隐藏，请单击另一个链接。

函数onClickDivOne（）{
$（“#div1”）.show（）；
$（“#div2”）.hide（）；
$（“#div3”）.hide（）；
}
函数onClickDivTwo（）{
$（“#div1”）.hide（）；
$（“#div2”）.show（）；
$（“#div3”）.hide（）；
}
函数onClickDivThree（）{
$（“#div1”）.hide（）；
$（“#div2”）.hide（）；
$（“#div3”）.show（）；
}
.div wrap{
背景色：#c6c8ca；
填充顶部：20px；
垫底：20px；
位置：相对位置；
高度：400px；
}
.div内容{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
显示：无；
}

这是第一分区，其他的都隐藏起来了。单击链接以显示不同的div。
这是第二分区，第一分区和第三分区被隐藏，请单击另一个链接。
这是第三分区，第二分区和第一分区被隐藏，请单击另一个链接。

函数onClickDivOne（）{
$（“#div1”）.show（）；
$（“#div2”）.hide（）；
$（“#div3”）.hide（）；
}
函数onClickDivTwo（）{
$（“#div1”）.hide（）；
$（“#div2”）.show（）；
$（“#div3”）.hide（）；
}
函数onClickDivThree（）{
$（“#div1”）.hide（）；
$（“#div2”）.hide（）；
$（“#div3”）.show（）；
}
.div wrap{
背景色：#c6c8ca；
填充顶部：20px；
垫底：20px；
位置：相对位置；
高度：400px；
}
.div内容{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
显示：无；
}$(".div-content").removeClass("show");
$(".div-content[data-div='"+target+"']").addClass("show");

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

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

<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;
}