При double клике tab панель исчезает

226
18 января 2018, 18:59

Здравсвуйте.

При тесте 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>

Answer 1

Вся проблема кроется в вашем 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>

READ ALSO
Google Maps API, прозрачный слой поверх карты

Google Maps API, прозрачный слой поверх карты

По задумке дизайнера поверх карты Google должен быть цветной прозрачный слой, но сам маркер с текстом должен быть над этим слоемСкажите, это...

275
Изменение ширины блока в зависимости от высоты другого

Изменение ширины блока в зависимости от высоты другого

Здравствуйтеподскажите, как сделать такую верстку, где ширина блока зависит от высоты другого:

317