Question

我有一个标签，应该隐藏的3/4标签在实际display:none;之前隐藏在屏幕上。我尝试在我的jQuery中添加额外的.addClass，在div上尝试了内联样式display:none;并在我的CSS文件中设置了display:none但仍然无法使用解决这个？可能导致这种情况的原因是什么？

＆＃13;

jQuery(function($) {
  $('.professor__tabs').each(function() {

    $('.tabs__body', this).addClass('tabs__body--is-hidden');
    $('.tabs__head', this).on('click', function(index) {

        var test = $(this).index();

        $('.tabs__body').addClass('tabs__body--is-hidden');
        $('.tabs__head')
          .removeClass('tabs__head--is-active')
          .filter($(this))
          .addClass('tabs__head--is-active')
          .next('.tabs__body')
          .removeClass('tabs__body--is-hidden');

      })
      .filter(':first')
      .click();
  });
});

＆＃13;

 .tabs__body {
   -webkit-box-flex: 0;
   -webkit-flex: 0 0 100%;
   -ms-flex: 0 0 100%;
   flex: 0 0 100%;
   -webkit-box-ordinal-group: 3;
   -webkit-order: 2;
   -ms-flex-order: 2;
   order: 2;
   background-color: white;
   padding: 20px;
   min-height: 260px;
   max-height: 410px;
   overflow: auto;
   border-bottom-left-radius: 6px;
   border-bottom-right-radius: 6px;
   display: block;
 }
 .tabs__body--is-hidden {
   display: none;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="professor__tabs">
  <div class="tabs__head">Intro</div>
  <div class="tabs__body">
    1
  </div>

  <div class="tabs__head">Events</div>
  <div class="tabs__body">
    2
  </div>

  <div class="tabs__head">Stream</div>
  <div class="tabs__body">
    3
  </div>

  <div class="tabs__head last-head">Posts</div>
  <div class="tabs__body">
    4
  </div>

＆＃13;

我注意到我无法在JSFiddle上复制此内容，但我还是会包含我的链接： Here

Answer 1

每当使用脚本隐藏元素时，元素可见的时间段都会存在。我建议将脚本放置在网页中的元素之后立即隐藏它，或者使用隐藏内容的加载屏幕，只有在页面完全加载时才会消失。

如果您想要迎合支持css但不支持js的浏览器，此方法很有用。这样的浏览器永远不会看到默认使用css隐藏的内容。

<div id='myDiv'></div>
<script>
    $('#myDiv').addClass('style--hidden');
</script>

否则将默认类设置为隐藏类，然后使用jQuery使用

$(element).removeClass('class-name--hidden');

Answer 2

由于你实现隐藏功能的方式，浏览器在文档准备好之前不会隐藏div - 相反，默认情况下你应该在已经使用html的div上有{{1}}，然后通过JS处理可见的div

为什么我的Div在隐藏之前会在屏幕上闪烁？

2 个答案: