Question

我的页面中有2个div，每个div都有a，b类。我也有2个网址

www.site.com/a
www.site.com/b

目标：当我在网站/ a时，我想隐藏div课程b 反之亦然。

目标是将它们完全隐藏在DOM之外。我不知道该怎么做。

我已经尝试了

JS

var lastSegment = location.pathname.split('/').pop();

if (lastSegment === 'a') {

    $(".a").removeClass("hidden");

} else {

    $(".b").removeClass("hidden");

}

CSS

.hidden {
  display: none!important;
  visibility: hidden!important;
}

HTML

<div class="a hidden"> // Logic </div>
<div class="b hidden"> // Logic </div>

结果

当我检查元素时，我可以看到两个div。

非常感谢任何关于此的帮助/提示/建议

Answer 1

jQuery的.detach()正在这样做。

.detach（）方法与.remove（）相同，但.detach（）除外保持所有jQuery数据与删除的元素相关联。这个当要删除的元素要重新插入时，方法很有用以后的DOM。

Answer 2

下面：

   var lastSegment = location.pathname.split('/').pop();

    if (lastSegment === 'a') {
        $(".b").remove();
    } else {
        $(".a").remove();
    }

您可以使用remove（）函数将其完全删除。

Answer 3

您无法通过添加和删除类来摆脱DOM。有多种方法可以解决这个问题。

完全使用Javascript添加/删除div。不要渲染两者。

if(lastSegment === "a") {
  $(".target").append('<div class="a">Link A</div>');
} 
else {
 $(".target").append('<div class="a">Link B</div>');
}

使用Shadow DOM - 使用inspect元素看不到ShadowDom元素，除非将某些设置深埋在设置图标内。

教程：http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/ 感谢

Answer 4

你可以试试这个

if (lastSegment === 'a') {

    $(".a").removeClass("hidden");
    $(".b").addClass("hidden");

} else {

    $(".a").addClass("hidden");
    $(".b").removeClass("hidden");


}

如何从HTML DOM中完全隐藏div？

4 个答案: