私は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");
}
私があなたの状況を正しく理解している場合、実際の問題は、以前に開いたタブに境界線を追加し、タブを変更するときに「アクティブ」タブの境界線を削除する方法です。
その場合、「videoTabs」などのルールなしで統合クラスを割り当て、そのクラスでjqueryを使用してすべてのタブを非アクティブ化し、そのタブのIDを使用して現在のタブをアクティブ化します。
簡単にするために、現在使用していないタブのクラスが「videoTabs」であるとします。現在使用しているタブには、「active」クラスと「videoTabs」クラスがあります。videoTabsには境界線が設定されています。アクティブクラスには、border-bottomオーバーライド「border-bottom：0px！important」があります。
次に行うことは、このプロセスを処理するタブを切り替えるたびに関数を呼び出すことです。
function switchTabs(requestedTabID){
$(".videoTabs").removeClass("active");
$("#"+requestedTabID).addClass("active");
}
これにより、すべてのタブが1つの状態に戻り、特定のタブのCSSを変更して、見た目を反映します。
これは最も洗練されたソリューションではないかもしれませんが、実装は簡単です。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加