主页 / 问题 / 771931
Accepted
Randall
Asked:2020-01-17 19:14:53 +0000 UTC2020-01-17 19:14:53 +0000 UTC

当您双击选项卡时，面板消失

  • 772

你好。

在测试标签面板时，我遇到了这样的问题。

当您双击面板和文本块时，面板也会消失并立即再次显示。

我将页脚面板放下，以便您清楚为什么需要解决此问题。（否则，有些人可能会认为它消失并立即出现这里可能出现的问题）请帮我解决问题？

// 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>

jquery

1 个回答

  1. Best Answer

    整个问题出在你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>

    • 0

相关问题