Javascript 将css具体化所有选项卡都放在一起，但刷新后工作正常

我使用MaterializeCSS选项卡，它加载所有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>

我试过了

$(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>

1.
2.
3.
4.

---

当您使用Tabs组件时；react-materialize获取子组件并相应地渲染它们。由于使用单个div包装所有组件，因此渲染将中断

你可以试试这样做

<div className="container">
    <Tabs className='tab purple darken-4'>
        <Tab title="All">1</Tab>
        <Tab title="Ongoing" active>2</Tab>
        <Tab title="Successful">3</Tab>
        <Tab title="Failed/Warning">4</Tab>       
    </Tabs>
</div>

1.
2.
3.
4.

或

<Tabs className='tab purple darken-4'>
    <Tab title="All">
        <div className="container">
            1
        </div>
    </Tab>
    <Tab title="Ongoing">
        <div className="container">
            2
        </div>
    </Tab>
    <Tab title="Successful">
        <div className="container">
            3
        </div>
    </Tab>
    <Tab title="Failed/Warning">
        <div className="container">
            4
        </div>
    </Tab>    
</Tabs>

1.
2.
3.
4.

---

如果您想更改选项卡或单个选项卡组件的外观，您也可以为它们使用

className

prop。

我不理解这个问题。你能提供问题的图片吗？问题中添加了代码片段检查开发人员工具中脚本加载的顺序。刷新之前和之后。混合使用react和jQuery不是一个好主意。我建议您考虑使用一个反应版本的材料UI。@ HemaNandagopal文件按正确的顺序加载。1.jquery2。具体化js3。那么，谢谢！。这解决了一个问题，但又解决了另一个问题。活动的下划线未出现在第一项上。如果转到第二个选项卡并返回到第一个选项卡，我认为您需要设置初始活动选项卡。查看文档了解更多信息。

<Tabs className='tab purple darken-4'>
    <Tab title="All">
        <div className="container">
            1
        </div>
    </Tab>
    <Tab title="Ongoing">
        <div className="container">
            2
        </div>
    </Tab>
    <Tab title="Successful">
        <div className="container">
            3
        </div>
    </Tab>
    <Tab title="Failed/Warning">
        <div className="container">
            4
        </div>
    </Tab>    
</Tabs>