make исчезает нижняя строка в tabs html jquery css

Question

Я делаю веб-приложение и пытаюсь сделать несколько приятных вкладок. Дело в том, что я не могу заставить вкладки показывать свой контент, когда они активны (если tab1 показать контент1), но без нижней границы вкладки, классические вкладки. Под этим я подразумеваю, перейдя на 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

Если я понять вашу ситуацию правильно, фактическая проблема заключается в том, как добавить границу к ранее открытым вкладкам и удалить границу на «активной» вкладке, когда вы меняете вкладки?

В этом случае я бы назначил унифицирующий класс без каких-либо правил на нем, таких как «videoTabs», затем с помощью jquery в этом классе деактивировать все вкладки, а затем активировать вкладку, на которой вы используете идентификатор этой вкладки.

Для простоты, скажем, вкладки, которые вы в настоящее время не используете, имеют класс «видеоТаблицы». На вкладке, которую вы используете, есть класс «active» и «videoTabs». На видеоэкране установлена ​​граница. Активный класс имеет граничное нижнее значение «border-bottom: 0px! Important».

Что бы вы сделали, тогда вызывается функция, когда вы переключаете вкладки, которые позаботятся об этом процессе.

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

Это приведет все вкладки назад в одном состоянии, то вы изменить CSS на вкладках конкретных, чтобы отражать то, как вы хотите, чтобы она выглядела.

Это может быть не самое элегантное решение, но его просто реализовать.