物化css所有选项卡在一起，但在刷新后正常工作
物化css所有选项卡在一起，但在刷新后正常工作
提问于 2017-09-06 19:44:45
我使用materialize css选项卡，它加载所有div，在第一次加载时一个位于另一个的下方。
如果我刷新页面，它就会开始正常运行。
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
<li class="tab col s3"><a href="#test4">Test 4</a></li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>这只是在第一次加载/服务器重启时给出了下面的代码片段：
现在，如果我刷新页面。它的工作方式与预期一致。
我导入了所有必需的js(jquery和materialize)和css，还添加了选项卡的初始化。
$(window).on("load", function () {
$('ul.tabs').tabs();
});我试过了
$(document).ready(function () {
$('ul.tabs').tabs();
});问题仍然存在。
有人知道解决这个问题的方法吗？
在materialize中，我面临着太多类似的问题。
另外，我使用react。如果这有什么不同的话。
使用react-materialize，我面临以下问题。
<Tabs className='tab purple darken-4'>
<div className="container">
<Tab title="All">1</Tab>
<Tab title="Ongoing" active>2</Tab>
<Tab title="Successful">3</Tab>
<Tab title="Failed/Warning">4</Tab>
</div>
</Tabs>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46074343
复制相关文章
相似问题
腾讯云开发者
