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

【问题标题】：make disappear bottom line in tabs html jquery css使标签中的底线消失 html jquery css
【发布时间】：2015-03-11 22:34:06
【问题描述】：

我正在制作一个 Web 应用程序并尝试制作一些漂亮的标签。问题是我不能让标签在它们处于活动状态时显示其内容（如果 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");
}

【问题讨论】：

标签： border out

【解决方案1】：

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

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

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

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

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

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

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

【讨论】：