Border 使标签中的底线消失html jquery css

我正在制作一个web应用程序，并尝试制作一些漂亮的标签。问题是我不能让选项卡在活动时显示其内容（如果tab1显示content1），但没有选项卡的底部边框，即经典选项卡。我的意思是切换到tab2，使tab1的下边框出现，使tab2的下边框消失，依此类推。我不知道它是否足够清楚，它比我想做的事情本身更难解释。这是我的代码，我有麻烦了

HTML

JS/JQuery

function mostrarVideos(){
    $("#todosVideos").show();
    $("#videoDestacado").hide();
    $("ul#pestanas li a").removeClass("active"); // desactivamos todas las pestañas
    $(this).addClass("active");
}

function mostrarInicio(){
    $("#todosVideos").hide();
    $("#videoDestacado").show();
    $("#pestanasPG li a").removeClass("active"); // desactivamos todas las pestañas
    $(this).addClass("active");
}

---

如果我正确理解了您的情况，那么实际的问题是如何在更改选项卡时向以前打开的选项卡添加边框，并删除“活动”选项卡上的边框

在这种情况下，我将分配一个统一类，而不使用任何规则，例如“videoTabs”，然后在该类上使用jquery来停用所有选项卡，然后使用该选项卡的ID激活正在使用的选项卡

为简单起见，假设您当前未使用的选项卡具有“videoTabs”类。您当前使用的选项卡具有“活动”和“视频选项卡”类。视频标签上有一个边框。活动类具有边框底部覆盖“边框底部：0px！重要”

然后，您要做的是在切换处理此过程的选项卡时调用函数

function switchTabs(requestedTabID){
    $(".videoTabs").removeClass("active");
    $("#"+requestedTabID).addClass("active");
}

这将使所有选项卡恢复到单一状态，然后更改特定选项卡的CSS以反映您希望它的外观

这可能不是最优雅的解决方案，但实现起来很简单

function mostrarVideos(){
    $("#todosVideos").show();
    $("#videoDestacado").hide();
    $("ul#pestanas li a").removeClass("active"); // desactivamos todas las pestañas
    $(this).addClass("active");
}

function mostrarInicio(){
    $("#todosVideos").hide();
    $("#videoDestacado").show();
    $("#pestanasPG li a").removeClass("active"); // desactivamos todas las pestañas
    $(this).addClass("active");
}

function switchTabs(requestedTabID){
    $(".videoTabs").removeClass("active");
    $("#"+requestedTabID).addClass("active");
}