使选项卡中的底线消失 html jquery css

Question

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

HTML

<div id="principal" class="wrapper">
<h2 class="subtitulo">Mis videos!</h2> 
    <ul id="pestanas">
        <li class="active"><a href="#" onclick="mostrarInicio()">Inicio</li>
        <li><a href="#" onclick="mostrarVideos()">Todos los videos</li>
    </ul>


    <div id="videoDestacado" class="active">
        <iframe width="420" height="345"
                src="http://www.youtube.com/embed/h6k5qbt72Os">
        </iframe>
    </div>
    <div id="todosVideos">
            Aca hay un contenido
    </div></div>

CSS

#principal ul {
    list-style: none;
    padding:0;
    margin:0;
}
#principal li {
    float: left;
    border: 1px solid;
    border-bottom: none; 
    /*border-bottom-width: 0;*/
    margin: 0 0.5em 0 0;
}

#principal li a {
    padding: 0 1em;
}

#active {
    position: relative;
    top: 1px;
    background: black;
    padding-bottom: 0px;
    border-bottom: none;

}

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");
}

Answer 1

如果我对你的情况的理解是正确的，实际问题是如何在之前打开的选项卡上添加边框并在更改选项卡时删除 "active" 选项卡上的边框？

在那种情况下，我会分配一个没有任何规则的统一 class，例如 "videoTabs"，然后在 class 上使用 jquery 来停用所有选项卡，然后使用该选项卡的 ID 激活您所在的选项卡。

为简单起见，假设您当前未使用的选项卡具有 class "videoTabs"。您当前使用的选项卡有 class "active" 和 "videoTabs"。 videoTabs 上设置了边框。活动 class 有一个 border-bottom 覆盖 "border-bottom: 0px !important".

然后您要做的就是在切换标签时调用一个函数来处理这个过程。

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

这会将所有选项卡恢复到单一状态，然后您可以更改特定选项卡的 CSS 以反映您想要的外观。

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

使选项卡中的底线消失 html jquery css

make disappear bottom line in tabs html jquery css

border

out