實現CSS將所有選項卡放在一起，但在刷新后仍能正常工作

Question

我使用物化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();
      });

問題仍然存在。

有人知道解決方案嗎？

我面臨着太多像這樣的問題。

另外，我使用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>

在添加div時做出反應

Answer 1

當您使用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>

要么

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

如果您想更改Tab或單個Tab組件的外觀，則也可以為其使用className屬性。