Question

我正在使用物化。有谁知道为什么会这样？当我刷新或加载页面时，会出现以下选项卡的一部分，然后在加载完成后消失。我想防止这种情况发生。我尝试过一些东西，但是我没有成功，如果这是正常的，请回答我。

HTML

<section class="section-cadastro blue-grey darken-4 z-depth-5 row">
    <div class="col s12">
        <h4>Escolha o tipo de cadastro</h4>
        <ul id="tabs-swipe-demo" class="tabs">
            <li class="tab col s3"><a class="active" href="#test-swipe-1">Test 1</a></li>
            <li class="tab col s3"><a class="indicator-custom" href="#test-swipe-2">Test 2</a></li>
            <li class="tab col s3"><a class="indicator-custom" href="#test-swipe-3">Test 3</a></li>
            <li class="tab col s3"><a class="indicator-custom" href="#test-swipe-4">Test 4</a></li>
            <li class="tab col s3"><a class="indicator-custom" href="#test-swipe-5">Test 5</a></li>
        </ul>
        <div id="test-swipe-1" class="col s12 normal-user">
            <form class="col s12">
                <div class="row">
                    <div class="input-field col l6 m6 s12">
                        <input id="first_name" type="text" class="validate">
                        <label for="first_name">Primeiro Nome</label>
                    </div>
                    <div class="input-field col l6 m6 s12">
                        <input id="last_name" type="text" class="validate">
                        <label for="last_name">Segundo Nome</label>
                    </div>
                </div>

                <div class="row">
                    <div class="input-field col s6">
                        <input id="password" type="password" class="validate">
                        <label for="password">Senha</label>
                    </div>

                    <div class="input-field col s6">
                        <input id="confirm_password" type="password" class="validate">
                        <label for="confirm_password">Confirmar Senha</label>
                    </div>
                </div>


                <div class="row">
                    <div class="input-field col s4">
                        <input id="email" type="email" class="validate">
                        <label for="email">Email</label>
                    </div>

                    <div class="cad-select input-field col l4 m6 s12">
                        <select>
                          <option value="" disabled selected>Função </option>
                          <option value="1">Compositor</option>
                          <option value="2">Cantor</option>
                          <option value="3">Bateirista</option>
                           <option value="4"></option>
                        </select>
                        <label>Escolha sua Função</label>
                    </div>                  

                    <div class="cad-select input-field col l4 m6 s12">
                        <select>
                          <option value="" disabled selected>Instrumento </option>
                          <option value="1">Gaita</option>
                          <option value="2">Violino</option>
                          <option value="3">Violão</option>
                          <option value="4">Bateria</option>
                          <option value="5"></option>
                        </select>
                        <label>Escolha seu Instrumento</label>
                    </div>      
                </div>                                                          

                <div class="cad-select input-field col s12 center">
                    <a class="blue btn btn-login">
                       Cadastrar-se
                    </a> 
                </div>
            </form>
        </div>
        <div id="test-swipe-2" class="col s12 red">Test 2</div>
        <div id="test-swipe-3" class="col s12 blue">Test 3</div>
        <div id="test-swipe-4" class="col s12 green">Test 4</div>
        <div id="test-swipe-5" class="col s12 grey">Test 5</div>
    </div>
</section>

CSS

.section-cadastro .tabs-content.carousel .carousel-item{ 
    height: 550px;
}
.section-cadastro{
    padding: 0px 10px 30px 10px;
    position: relative;
    width: 100%;
}
.section-cadastro.row{
    padding: 0 !important;
}
.section-cadastro > .col{
    padding: 0 !important;
}

JQUERY

$(document).ready( function(){
   $('ul.tabs').tabs({
      swipeable: true
   }); // Tabs              
})

Answer 1

这种情况正在发生，因为材料js库创建的选项卡类在加载时需要时间。

要解决此问题，您可以在所有标签中使用自己的自定义类，并将opacity:0设置为该类。

.custom {
  opacity: 0;
}

<强> Updated Fiddle

更新或加载页面时出现的所有选项卡实现

1 个答案: