实现CSS将所有选项卡放在一起，但在刷新后仍能正常工作

Question

I use materialize css tabs and it loads all the divs, one below the other on the first load.

If i refresh the page, it starts behaving properly.

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

This just gives me the snippet below on the first load / server restart:

snippet

Now, if i refresh the page. It works as expected.

I imported all the required js(jquery and materialize) and css and I also added the initialization for tabs.

$(window).on("load", function () {
    $('ul.tabs').tabs();
  });

i have tried

$(document).ready(function () {
        $('ul.tabs').tabs();
      });

The issue still persists.

Anyone know the solution to this?

I am facing too many issues like these with materialize.

Also, I use react. If that makes any difference.

Using react-materialize, I face the below issue.

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

React issue on adding divs

Answer 1

When you use Tabs component; react-materialize get the child components and renders them accordingly. Since you are wrapping all components with a single div the render breaks.

You can try doing something like this;

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

OR

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

If you like to change the apperiance of the Tabs or a single Tab component you can use className prop for them too.