Jquery 按ID和CSS属性选择元素

通过CSS，我将所有div设置为visibility:hidden。通过单击导航栏中的项目，我希望将目标div设置为visibility:visible。这很好，但如果它已经可见，我希望避免再次设置它

这个代码不起作用

function showNewElement(actID) {
   ID = actID.substring(1, actID.length);
   $('.mainDiv:visible').css("visibility", "hidden");
   $("#" + ID + ':hidden').css("visibility", "visible").hide().fadeIn('fast');
}

所以我必须用if语句来包装它

function showNewElement(actID) {
    var ID = actID.substring(1, actID.length);
    if ($("#" + ID).css("visibility") != "visible") {
        $('.mainDiv').css("visibility", "hidden");
        $("#" + ID).css("visibility", "visible").hide().fadeIn('fast');
    }
}

为什么它不能以另一种方式工作？

写下：

function showNewElement(actID) {
    ID = actID.substring(1, actID.length);
    if ($("#" + ID).css("visibility") == "hidden"){
        $(".mainDiv:visible").css("visibility", "hidden");
        $("#" + ID).css("visibility", "visible");
    }
}

从

如果元素占用文档中的空间，则认为它们是可见的。 可见性为：隐藏或不透明度为0的元素视为可见，因为它们仍会占用布局中的空间

因此，尽管无法看到元素，但它们不在：visible集中

相反，您可以在mainDiv元素上使用display:none。那么它将被认为是无形的

梅因迪夫先生{ 显示：无； } 然后将jQuery更改为just

函数showNewElementactID{ ID=活动子字符串1，活动长度； $'.mainDiv:visible'.hide； $+ID+'：隐藏'.fadeIn； }

---

请参见修改后的

如果您更改以下内容，它将起作用：

$("#" + ID + ':hidden').css("visibility", "visible").hide().fadeIn('fast');

致：

---

实际上，我想让2-liner正常工作，因为从逻辑上看，它似乎是对的，但不起作用。我想知道为什么；

$("#" + ID).css("visibility", "visible").hide().fadeIn('fast');