MaterializeCSS does not work as expected -> JavaScript Missing?

Question

I try to use the materialize.css library. I used the HTML setup with the CDN and copied a navbar inside (https://materializecss.com/getting-started.html)

<!DOCTYPE html>
    <html>
      <head>
        <!--Import Google Icon Font-->
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!--Import materialize.css-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    
        <!--Let browser know website is optimized for mobile-->
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
      </head>
      <body>
    
        <nav class="nav-extended">
          <div class="nav-wrapper">
            <a href="#" class="brand-logo">Logo</a>
            <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
          </div>
          <div class="nav-content">
            <ul class="tabs tabs-transparent">
              <li class="tab"><a href="#test1">Test 1</a></li>
              <li class="tab"><a class="active" href="#test2">Test 2</a></li>
            </ul>
          </div>
        </nav>
    
      
        <div id="test1" class="col s12">Test 1</div>
        <div id="test2" class="col s12">Test 2</div>
    
        <!--JavaScript at end of body for optimized loading-->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
      </body>
    </html>

The are not aminations, both "Test1" and "Test2" get displayed. I guess there is something missing, because I get no error. Does anyone know how to do this?

Bibek Shakya · Accepted Answer · 2020-01-03 10:14:14Z

I can see you are trying to use tab in navbar. So, you are missing 2 things:

JQuery CDN link
Initialization

You have to refer to this documentation to implement tab: https://materializecss.com/tabs.html

Demo in codepen: https://codepen.io/Bibeva/pen/KKwyqre

Final code:

<!DOCTYPE html>
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>

  <nav class="nav-extended">
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
    </div>
    <div class="nav-content">
      <ul class="tabs tabs-transparent">
        <li class="tab"><a href="#test1">Test 1</a></li>
        <li class="tab"><a class="active" href="#test2">Test 2</a></li>
      </ul>
    </div>
  </nav>


  <div id="test1" class="col s12">Test 1</div>
  <div id="test2" class="col s12">Test 2</div>

  <!--JavaScript at end of body for optimized loading-->
  <!-- Jquery CDN Newly Added -->
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <!-- Initialization Newly Added -->
  <script>
    $(document).ready(function () {
      $('.tabs').tabs();
    });
  </script>
</body>

</html>

Udhay Titus · Accepted Answer · 2020-01-03 10:25:39Z

You have to use tab class properly, try the below code

.tab a{
  color:#bbb !important;
}
.tab a.active{
  color:#eee !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

<div class="row ">
    <div class="col s12">
      <ul class="tabs red lighten-1">
        <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"><a href="#test3">Test 3</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>

Collectives™ on Stack Overflow

MaterializeCSS does not work as expected -> JavaScript Missing?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related