Javascript 制作切换按钮以更改面板

我的应用程序顶部有两个面板，按钮上有一个按钮。默认情况下，只有面板一必须可见，但单击按钮面板一会淡出，面板二会淡入。我创建了布局，但我不知道如何实现它

$（.panel2”）.hide（）；
$（文档）.ready（函数（）{
$（“.grid按钮”）。打开（“单击”，函数（）{
$（“.grid”）.toggleClass（“打开-关闭”）；
});
});
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{
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
位置：绝对位置；
左：0px；
顶部：0px；
}
.网格按钮{
背景：无；
边界：无；
填充：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
小组2
要首先隐藏其中一个面板，我将使用一个名为
hidden
的
css
类：

.hidden{
  display : none;
}

这听起来很简单，隐藏了元素。
然后，我在
HTML
declaration中设置了这个类：

<div class="panel2 hidden">Panel2</div>

最后，为了使这项工作适用于您想要的任意数量的面板（不需要2），我将使用“旋转木马”效果切换面板的可见性，同时有一种跟踪它们的方法（添加和删除
隐藏的
类），并使用fadeIn/fadeOut效果。（同样，不要使用
panel1、panel2、panel3…
类来识别面板，您可以始终使用
data
属性（请在jQuery文档中阅读更多关于它的信息），或者以任何其他方式）

只需注意，
hidden
类在第一次单击后实际上“松开”了它的功能，因为jQuery会内联更改
display
属性，但我认为保留它们可能不会有什么害处（跟踪它们会更容易）

您可以在此处看到一个示例：
您可以尝试：

$(".grid-button").on("click", function() {
   var visibleObj = $('.mainSection div:visible');
   var inVisibleObj = $('.mainSection div:hidden');
   visibleObj.fadeOut(500, function() {
       inVisibleObj.fadeIn(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{
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.5）；
位置：绝对位置；
左：0px；
顶部：0px；
}
.网格按钮{
背景：无；
边界：无；
填充：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
小组2
请澄清您到底想要什么？谢谢您的帖子+谢谢你的专业解决方案。谢谢你的帖子。
var currentPanel = 1;
$(".grid-button").on("click", function() {

    $(".grid").toggleClass("open close");        
    $(".panel"+currentPanel).fadeOut("normal", function(){
        $(this).addClass('hidden');
    });

    currentPanel = currentPanel >= $(".panel").length ?  1 :  currentPanel+1;
    $(".panel"+currentPanel).fadeIn().removeClass('hidden');
});

$(".grid-button").on("click", function() {
   var visibleObj = $('.mainSection div:visible');
   var inVisibleObj = $('.mainSection div:hidden');
   visibleObj.fadeOut(500, function() {
       inVisibleObj.fadeIn(500);
   });
});
<div class="panel2" style="display: none;">Panel2</div>