Javascript 如何创建切换按钮在面板之间切换

在我的应用程序中，我有2个切换按钮和3个面板按钮1在面板1和面板2之间切换。和按钮2在面板1和面板3之间切换。通过给出

display:none，我可以让它以某种方式工作属性到div面板。但有一次，它只对每个按钮工作一次，然后使所有子div显示为
无
请看一下样品：


$（函数（）{
$（“button.panel2”）。在（“单击”，函数（）{
var visibleObj=$（'.mainSection div:visible'）；
如果（$（“div.panel2”）.css（“显示”）=“无”）{
var inVisibleObj=$（“div.panel2”）
}
否则{
var inVisibleObj=$（“div.panel1”）
}
visibleObj.fadeOut（500，函数（）{
无形的法代因（500）；
})
});
$（“button.panel3”）。在（“单击”，函数（）{
var visibleObj=$（'.mainSection div:visible'）；
如果（$（“div.panel3”）.css（“显示”）=“无”）{
var inVisibleObj=$（“div.panel3”）
}
否则{
var inVisibleObj=$（“div.panel1”）
}
visibleObj.fadeOut（500，函数（）{
无形的法代因（500）；
})
});
});
div.app{
保证金：50px自动；
宽度：400px；
高度：400px；
边界半径：10px；
溢出：隐藏；
位置：相对位置；
}
div.app>.blur{
宽度：100%；
身高：100%；
背景：url(http://goo.gl/0VTd9W);
-webkit过滤器：模糊（5px）；
}
分区主控区，分区仪表板{
位置：绝对位置；
左：0px；
文本对齐：居中；
颜色：#fff；
字体大小：20px；
}
主分区{
宽度：100%；
身高：85%；
背景：rgba（0,0,0,0.5）；
排名：0；
}
分区仪表板{
宽度：100%；
身高：15%；
背景：rgba（255,0,0,0.5）；
底部：0；
}
div.main节>.panel1，
div.main节>.panel2，
div.main节>.panel3{
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
位置：绝对位置；
左：0px；
顶部：0px；
}
div.main节>.panel3>p{
边缘顶部：80px；
}
.网格按钮{
背景：无；
边界：无；
填充：3倍；
宽度：100%；
}
.电网{
显示：内联块；
高度：4px；
位置：相对位置；
宽度：32px；
过渡：所有0.3秒的缓进缓出；
}
.grid:after，.grid:before{
内容：''；
位置：绝对位置；
背景色：#FFF；
显示：内联块；
高度：4px；
左：0；
宽度：32px；
过渡：所有0.3秒的缓进缓出；
}
.grid.open{
背景色：#FFF；
}
.grid.打开：之后{
顶部：10px；
}
.grid.open:在{
顶部：-10px；
}
.grid.close{
背景色：透明；
变换：比例（0.9）；
}
.grid.close:after、.grid.close:before{
排名：0；
变换原点：50%50%；
}
.grid.close:之前{
变换：旋转（135度）；
}
.grid.close:之后{
变换：旋转（45度）；
}

小组1
小组1
小组2
小组3

小组3
小组3
按钮1
按钮2
您需要通过以下方式更改javascript：

$(function () {
    $("button.panel2").on("click", function() {
        var visibleObj = $('.mainSection > div:visible');

        if ($("div.panel2").css("display") == "none") {
            var inVisibleObj = $("div.panel2")
        }
        else {
            var inVisibleObj = $("div.panel1")
        }
        visibleObj.fadeOut(500, function() {
            inVisibleObj.fadeIn(500);
        });
    });


    $("button.panel3").on("click", function() {
        var visibleObj = $('.mainSection > div:visible');
        if ($("div.panel3").css("display") == "none") {
            var inVisibleObj = $("div.panel3")
        }
        else {
            var inVisibleObj = $("div.panel1")
        }
        visibleObj.fadeOut(500, function() {
            inVisibleObj.fadeIn(500);
        })
    });
});

问题出在选择器
$（'.mainSection div:visible'）。这将同时选择子div，当您尝试显示正确的面板时，子div将被隐藏。如果您使用
$（'.mainSection>div:visible'）您只得到直接的子div。
当您在面板2或3上并且您想要更改时，逻辑上似乎有点混乱，因为两个按钮都从面板1更改为其他按钮-为什么不三个按钮，每个面板一个，每个按钮都显示分配给它的面板？