0

我有一个选项卡，它在加载时会闪烁...当页面加载时，我不将其视为选项卡，当页面完成加载时，我会得到正确的加载...我想避免它。它在 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>
4

2 回答 2

1

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

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

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

另外，看看这个线程

于 2013-09-07T09:43:15.837 回答
1

对于您的特定查询，您可以使用它（不使用 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>

：

于 2018-07-29T07:22:04.283 回答