Здравсвуйте.
При тесте tab панели наткнулсья на такую проблему.
При двойном клике на панель и на блок текста тоже панель изчезает и опять показывается сразу.
Я поставил вниз панелья footer что бы вам ясно было понятно почему нужно решить данную задачку.(А то некоторые могут подумать что исчезает и сразу появляется что тут может быть плохого)Помогите пожалуйста что может быть не так ?
// TABS AFFIX
// tabbed content
$(".main_content").hide();
$(".main_content:first").show();
/* if in tab mode */
$("ul.tabs_container li").click(function() {
$(".main_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
$("ul.tabs_container li").removeClass("active_content");
$(this).addClass("active_content");
$(".tab_drawer_heading_main").removeClass("d_active");
$(".tab_drawer_heading_main[rel^='"+activeTab+"']").addClass("d_active");
});
/* if in drawer mode */
$(".tab_drawer_heading_main").click(function() {
$(".main_content").hide();
var d_activeTab = $(this).attr("rel");
$("#"+d_activeTab).fadeIn();
$(".tab_drawer_heading_main").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs_container li").removeClass("active_content");
$("ul.tabs_container li[rel^='"+d_activeTab+"']").addClass("active_content");
});
$('ul.tabs_container li').last().addClass("tab_last");
.filterlist_main {
overflow: hidden;
height: 100%;
color: #37454d;
direction: ltr;
background-color: #fff;
width: 100%;
}
ul.tabs_container {
width: 250px;
display: flex;
table-layout: fixed;
border-collapse: collapse;
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #cdd0d2;
border-top: 1px solid #cdd0d2;
border-left: 1px solid #cdd0d2;
width: 100%;
margin-bottom: 2px;
}
ul.tabs_container li {
width: 250px;
display: flex;
table-layout: fixed;
border-collapse: collapse;
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #cdd0d2;
border-top: 1px solid #cdd0d2;
border-left: 1px solid #cdd0d2;
width: 100%;
}
ul.tabs_container li:hover {
background-color: #ccc;
color: #333;
}
ul.tabs_container li.active_content {
border-bottom-color:#37454d;
border-bottom: 2px solid #333;
display: block;
}
ul.tabs_container .tabs-item.active_content {
border-bottom-color:#37454d;
border-bottom: 2px solid #333;
display: block;
}
.tab_main_container {
border-top: none;
/*border: 1px solid #333;*/
clear: both;
float: left;
width: 100%;
background: #fff;
overflow: auto;
}
.main_content {
padding: 20px;
display: none;
}
.tab_drawer_heading_main {
display: block;
}
ul.tabs_container li:first-child {
cursor:auto;
}
ul.tabs_container li:first-child:hover {
cursor:auto;
background-color: transparent;
color: #697379;
}
.tab_last { border-right: 1px solid #333; }
.footer {
height:400px;
background:red;
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-affix filterlist_main">
<ul class="tabs_container">
<span style="text-indent: 1em;line-height: 2;">Сортировать:</span>
<li class="tabs-item active_content" rel="tab4">
<button class="tabs-label">Our recommendations</button>
</li>
<li class="tabs-item" rel="tab5">
<button class="tabs-label">Distance from city center</button>
</li>
<li class="tabs-item" rel="tab6">
<button class="tabs-label">Rating based on reviews</button>
</li>
<li class="tabs-item" rel="tab7">
<button class="tabs-label">Lowest price first</button>
</li>
</ul>
</div>
<div class="main">
<div class="tab_main_container">
<div class="center_content d_active tab_drawer_heading_main" rel="tab4">
<div id="tab4" class="container_itemlist main_content" >
fulpix
<!-- BURA ATILACAG TEKST VAR -->
</div>
</div>
<!-- tab 4 -->
<div class="center_content active_content tab_drawer_heading_main" rel="tab5">
<div class="container_itemlist main_content" id="tab5">
chermander
</div>
</div>
<!-- tab 5-->
<div class="center_content active_content tab_drawer_heading_main" rel="tab6">
<div class="container_itemlist main_content" id="tab6">
bulbasaur
</div>
</div>
<!-- tab 6-->
<div class="center_content active_content tab_drawer_heading_main" rel="tab7">
<div class="container_itemlist main_content" id="tab7">
pikachu
</div>
</div>
<!-- tab 7-->
</div>
</div>
<div class="footer">
kakoy nibud footter
</div>
Вся проблема кроется в вашем fadeIn();
Суть получается примерно следующая - сам блок вы скрываете сразу, а вот fadeIn
сперва меняет opacity
и затем уже только делает блок видимым. Вот и получается. Чтоб избежать этого и иметь этот эффект - лучше использовать animate()
- сперва делаете у всех main_content
opacity 0
, затем скрываете их и тут же показываете какой нужный (он все еще прозрачный) и затем уже опять с помощью animate
убираете прозрачность
// TABS AFFIX
// tabbed content
$(".main_content").hide();
$(".main_content").css({opacity: 0});
$(".main_content:first").show();
$(".main_content:first").css({opacity: 1});
/* if in tab mode */
$("ul.tabs_container li:not(.clicked)").click(function() {
$(this).addClass('clicked');
$.each($('ul.tabs_container li:not([rel="'+$(this).attr('rel')+'"])'), function(){
$(this).removeClass('clicked');;
})
var activeTab = $(this).attr("rel");
//$(".main_content").animate({opacity:0}, 300, function(){
$(".main_content").hide();
$("#"+activeTab).show();
$("#"+activeTab).animate({opacity: 1}, 300);
//});
$("ul.tabs_container li").removeClass("active_content");
$(this).addClass("active_content");
$(".tab_drawer_heading_main").removeClass("d_active");
$(".tab_drawer_heading_main[rel^='"+activeTab+"']").addClass("d_active");
});
/* if in drawer mode */
$(".tab_drawer_heading_main").click(function() {
$(".main_content").hide();
var d_activeTab = $(this).attr("rel");
$("#"+d_activeTab).fadeIn();
$(".tab_drawer_heading_main").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs_container li").removeClass("active_content");
$("ul.tabs_container li[rel^='"+d_activeTab+"']").addClass("active_content");
});
$('ul.tabs_container li').last().addClass("tab_last");
.filterlist_main {
overflow: hidden;
height: 100%;
color: #37454d;
direction: ltr;
background-color: #fff;
width: 100%;
}
ul.tabs_container {
width: 250px;
display: flex;
table-layout: fixed;
border-collapse: collapse;
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #cdd0d2;
border-top: 1px solid #cdd0d2;
border-left: 1px solid #cdd0d2;
width: 100%;
margin-bottom: 2px;
}
ul.tabs_container li {
width: 250px;
display: flex;
table-layout: fixed;
border-collapse: collapse;
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
border-bottom: 1px solid #cdd0d2;
border-top: 1px solid #cdd0d2;
border-left: 1px solid #cdd0d2;
width: 100%;
}
ul.tabs_container li:hover {
background-color: #ccc;
color: #333;
}
ul.tabs_container li.active_content {
border-bottom-color:#37454d;
border-bottom: 2px solid #333;
display: block;
}
ul.tabs_container .tabs-item.active_content {
border-bottom-color:#37454d;
border-bottom: 2px solid #333;
display: block;
}
.tab_main_container {
border-top: none;
/*border: 1px solid #333;*/
clear: both;
float: left;
width: 100%;
background: #fff;
overflow: auto;
}
.main_content {
padding: 20px;
display: none;
}
.tab_drawer_heading_main {
display: block;
}
ul.tabs_container li:first-child {
cursor:auto;
}
ul.tabs_container li:first-child:hover {
cursor:auto;
background-color: transparent;
color: #697379;
}
.tab_last { border-right: 1px solid #333; }
.footer {
height:400px;
background:red;
width:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-affix filterlist_main">
<ul class="tabs_container">
<span style="text-indent: 1em;line-height: 2;">Сортировать:</span>
<li class="tabs-item active_content" rel="tab4">
<button class="tabs-label">Our recommendations</button>
</li>
<li class="tabs-item" rel="tab5">
<button class="tabs-label">Distance from city center</button>
</li>
<li class="tabs-item" rel="tab6">
<button class="tabs-label">Rating based on reviews</button>
</li>
<li class="tabs-item" rel="tab7">
<button class="tabs-label">Lowest price first</button>
</li>
</ul>
</div>
<div class="main">
<div class="tab_main_container">
<div class="center_content d_active tab_drawer_heading_main" rel="tab4">
<div id="tab4" class="container_itemlist main_content" >
fulpix
<!-- BURA ATILACAG TEKST VAR -->
</div>
</div>
<!-- tab 4 -->
<div class="center_content active_content tab_drawer_heading_main" rel="tab5">
<div class="container_itemlist main_content" id="tab5">
chermander
</div>
</div>
<!-- tab 5-->
<div class="center_content active_content tab_drawer_heading_main" rel="tab6">
<div class="container_itemlist main_content" id="tab6">
bulbasaur
</div>
</div>
<!-- tab 6-->
<div class="center_content active_content tab_drawer_heading_main" rel="tab7">
<div class="container_itemlist main_content" id="tab7">
pikachu
</div>
</div>
<!-- tab 7-->
</div>
</div>
<div class="footer">
kakoy nibud footter
</div>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
По задумке дизайнера поверх карты Google должен быть цветной прозрачный слой, но сам маркер с текстом должен быть над этим слоемСкажите, это...
Здравствуйтеподскажите, как сделать такую верстку, где ширина блока зависит от высоты другого: