make disappear bottom line in tabs html jquery css

Question

i am making a web application and trying to make some nice tabs. The thing is i can't make the tabs show its content when they are active (if tab1 show content1) but without the bottom-border of the tab, classic tabs. With this i mean by switching to tab2, to make the bottom border of tab1 to appear and make disappear the bottom border of the tab2 and so on. I dont know if its clear enough its harder to explain than the thing i want to do itself. Here is my code where im having trouble with it...

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

score 0 · Accepted Answer · answered Mar 11 '15 at 22:51

If I'm understanding your situation correctly, the actual problem is how to add a border to previously opened tabs and removing the border on the "active" tab when you change tabs?

In that case, I would assign an unifying class without any rules on it such as "videoTabs" then use jquery on that class to deactivate all tabs then activate the tab you're on using that tab's ID.

For simplicity, let's say the tabs you are not currently using have the class "videoTabs". The tab you are currently using has the class "active" and "videoTabs". The videoTabs has a border set on it. The active class has a border-bottom override "border-bottom: 0px !important".

What you would do then is call a function whenever you switch tabs that'll take care of this process.

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

This will bring all of the tabs back to a single state then you change the specific tab's CSS to reflect how you want it to look.

This may not be the most elegant solution but it's simple to implement.

make disappear bottom line in tabs html jquery css

1 Answers1