Question

我有一个tabber在加载时闪烁...当页面加载时，我不会将其视为标签，当页面完成加载然后我得到正确加载...我想避免它。它在FireFox和Chroom中。

<div class="tabber">  
<div class="tabbertab tab_buy">
<h2>Buy</h2>    
<div class="buy_cont">
<input id="txt" name="txt"  type="text" placeholder="Search by  Keyword..." />
 <div class="loc_sec">
<a href="#" target="_blank"><img src="images/map_ico.png" alt="" />
Location Map</a>
</div>
</div> </div>

<div class="tabbertab tab_rent">
<h2>rent</h2>   
<div class="buy_cont">
<input id="txt" name="txt"  type="text" placeholder="Search by  Keyword..." />

<div class="loc_sec">
<a href="#" target="_blank"><img src="images/map_ico.png" alt="" />
Location Map</a>
</div> </div>
</div>
</div>

Answer 1

在您的css文件中将#tabber设置为display : none，这会在文档加载时删除您的标签。

在设置tabber的javascript文件的末尾，使用jQuery再次显示它。这应该在你的JS文件加载完毕后执行

$(#tabber).css('display', 'block');

另外，看看this线程

Answer 2

对于您的特定查询，您可以使用它（不使用Tabber.js）：

$('.tabber').wrapInner('<div class="tabber-content-col"></div>');
$('.tabber-content-col').before('<div class="tabber-nav-col"><ul class="tab-nav"></ul></div>');
$('.tabbertab').each(function() {
  var tabNav = $(this).children('h2').text();
  $('.tab-nav').append('<li>' + tabNav + '</li>');
});
$('.tabbertab').hide();
$('.tabbertab').first().show();
$('.tab-nav > li').first().addClass('active');
$('.tab-nav > li').click(function() {
  $(this).addClass('active').siblings().removeClass('active');
  $('.tabbertab').eq($(this).index()).show().siblings().hide();
});

ul.tab-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  background: lightgray;
}

ul.tab-nav>li {
  padding: 10px 20px;
  display: inline-block;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.2;
  text-transform: capitalize;
}

ul.tab-nav>li.active {
  background: #eee;
}

.tabber-content-col {
  overflow: hidden;
  background: #eee;
  padding: 40px 20px;
  margin: 0 0 50px;
}

.tabbertab {
  display: none;
}

.tabbertab>*:first-child {
  margin-top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="tabber">
  <div class="tabbertab tab_buy">
    <h2>Buy</h2>
    <div class="buy_cont">
      <input id="txt" name="txt" type="text" placeholder="Search by  Keyword..." />
      <div class="loc_sec">
        <a href="#" target="_blank"><img src="images/map_ico.png" alt="" /> Location Map</a>
      </div>
    </div>
  </div>

  <div class="tabbertab tab_rent">
    <h2>rent</h2>
    <div class="buy_cont">
      <input id="txt" name="txt" type="text" placeholder="Search by  Keyword..." />

      <div class="loc_sec">
        <a href="#" target="_blank"><img src="images/map_ico.png" alt="" /> Location Map</a>
      </div>
    </div>
  </div>
</div>

：

页面加载时tabber闪烁

2 个答案: