Javascript 如何使用onClick函数在jQuery中添加和删除同一类之间切换

我试图在添加和删除类之间切换，以隐藏/显示弹出窗口。 我想要的是一个类似于带有窗口浏览器的计算机屏幕的东西，因此当单击图标时，会弹出一个窗口，导航栏底部的选项卡也会弹出，您可以单击该选项卡在打开和关闭窗口之间切换

以下是我迄今为止的一个例子：

当我点击“切换按钮”时，弹出窗口关闭了，但是我无法让它重新打开

提前谢谢你

$（'.icon3'）。在（“单击”，函数（）上）{
$（“.windowframe、.WindowContent、.navbartabs”）.addClass（“活动”）；
$（“.navbartabs”）.css（“显示”、“内联块”）；
});
$（“.close”）。在（“单击”，函数（）{
$（.windowframe.windowcontent”）.removeClass（“活动”）；
$（“.navbartabs”）.css（“显示”、“无”）；
});
$（“.navbartabs”）。在（“单击”，函数（）{
$（“.navbartabs”）.css（“显示”、“内联块”）；
});
iframe{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
边界：无；
溢出：隐藏；
显示器：flex；
}
.窗框{
/*当没有“活动”类时隐藏弹出窗口*/
可见性：隐藏；
位置：绝对位置；
背景：#ffffff；
边框：3px实心#666666；
宽度：50%；
身高：50%；
左：25%；
}
.windowframe.active{
/*存在“活动”类时显示弹出窗口*/
能见度：可见；
文本对齐：居中；
}
.窗口内容{
/*当没有“活动”类时隐藏弹出内容*/
可见性：隐藏；
}
.window-content.active{
/*当存在“活动”类时显示弹出内容*/
能见度：可见；
}
纳瓦巴塔布斯先生{
显示：无；
左边距：70像素；
高度：20px；
宽度：100px；
浮动：对；
}

帽子
接近
切换按钮
无需使用css。您可以使用jquery
toggleClass（）

如果要切换类，则可以使用
toggleClass（）

工作代码


$（'.icon3'）。在（“单击”，函数（）上）{
$（“.windowframe、.WindowContent、.navbartabs”）.toggleClass（“活动”）；
$（“.navbartabs”）.css（“显示”、“内联块”）；
});
$（“.close”）。在（“单击”，函数（）{
$（.windowframe.windowcontent”）.toggleClass（“活动”）；
$（“.navbartabs”）.css（“显示”、“无”）；
});
$（“.navbartabs”）。在（“单击”，函数（）{
$（“.navbartabs”）.css（“显示”、“内联块”）；
});
iframe{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
边界：无；
溢出：隐藏；
显示器：flex；
}
.窗框{
/*当没有“活动”类时隐藏弹出窗口*/
可见性：隐藏；
位置：绝对位置；
背景：#ffffff；
边框：3px实心#666666；
宽度：50%；
身高：50%；
左：25%；
}
.windowframe.active{
/*存在“活动”类时显示弹出窗口*/
能见度：可见；
文本对齐：居中；
}
.窗口内容{
/*当没有“活动”类时隐藏弹出内容*/
可见性：隐藏；
}
.window-content.active{
/*当存在“活动”类时显示弹出内容*/
能见度：可见；
}
纳瓦巴塔布斯先生{
显示：无；
左边距：70像素；
高度：20px；
宽度：100px；
浮动：对；
}

帽子
接近
切换按钮
您需要使用函数添加/删除活动类

这是你的密码

 $('.icon3').on("click", function() {
         $(".windowframe, .window-content, .navbartabs").addClass("active");
         $(".navbartabs").css("display", "inline-block");
     });

     $(".close").on("click", function() {
         $(".windowframe, .window-content").removeClass("active");
         $(".navbartabs").css("display", "none");
     });

     $(".navbartabs").on("click", function() {
         $(".windowframe, .window-content").toggleClass('active');
     });

试试这段代码

使用
toggel按钮
可以
显示隐藏弹出窗口


$（'.icon3'）。在（“单击”，函数（）上）{
$（“.windowframe、.WindowContent、.navbartabs”）.addClass（“活动”）；
$（“.navbartabs”）.css（“显示”、“内联块”）；
});
$（“.close”）。在（“单击”，函数（）{
if（$（“.window content”）.hasClass（'active'））{
$（.windowframe.windowcontent”）.removeClass（“活动”）；
$（“.navbartabs”）.css（“显示”、“无”）；
}否则{
$（“.windowframe、.WindowContent、.navbartabs”）.addClass（“活动”）；
$（“.navbartabs”）.css（“显示”、“内联块”）；
}
});
$（“.navbartabs”）。在（“单击”，函数（）{
$（“.navbartabs”）.css（“显示”、“内联块”）；
});
iframe{
宽度：100%；
身高：100%；
填充：0；
保证金：0；
边界：无；
溢出：隐藏；
显示器：flex；
}
.窗框{
/*当没有“活动”类时隐藏弹出窗口*/
可见性：隐藏；
位置：绝对位置；
背景：#ffffff；
边框：3px实心#666666；
宽度：50%；
身高：50%；
左：25%；
}
.windowframe.active{
/*存在“活动”类时显示弹出窗口*/
能见度：可见；
文本对齐：居中；
}
.窗口内容{
/*当没有“活动”类时隐藏弹出内容*/
可见性：隐藏；
}
.window-content.active{
/*当存在“活动”类时显示弹出内容*/
能见度：可见；
}
纳瓦巴塔布斯先生{
显示：无；
左边距：70像素；
高度：20px；
宽度：100px；
浮动：对；
}

帽子
接近
切换按钮
当您单击
切换按钮时，请确保它是否具有类
关闭
。根据该类的不同，您可以显示/隐藏
窗框

另外，您必须确保在隐藏
切换和windowframe
时触发的类按钮必须是
.windowframe.close
而不是
。close
，因为，当您单击具有类
的
切换按钮
。关闭
时，它将触发此功能并隐藏
窗口框和切换按钮


$（'.icon3'）。在（“单击”，函数（）上）{
展示窗框（1）；
showtoglebtn（1）；
});
$（.windowframe.close”）。打开（“单击”，函数（）{
showWindowframe（0）；
showToggleBtn（0）；
});
$（“.navbartabs”）。在（“单击”，函数（）{
if（$（this）.hasClass（“close”））{
$（此）.removeClass（“关闭”）；
showWindowframe（0）；
}
否则{
$（此）.addClass（“关闭”）
展示窗框（1）；
}
});
函数showWindowframe（状态）{
如果
 $('.icon3').on("click", function() {
         $(".windowframe, .window-content, .navbartabs").addClass("active");
         $(".navbartabs").css("display", "inline-block");
     });

     $(".close").on("click", function() {
         $(".windowframe, .window-content").removeClass("active");
         $(".navbartabs").css("display", "none");
     });

     $(".navbartabs").on("click", function() {
         $(".windowframe, .window-content").toggleClass('active');
     });