Search code examples
javascripthtmlcssmaterialize

Card tabs do not correspond with text when clicking on tabs?

I am attempting to use a card <div> that has tabs inside of it that you can click

You can view the code here:

http://materializecss.com/cards.html#

CTRL+F "Tabs in Cards"

When you copy the markup source, however, the tabs in the card do not work, nor does it correspond to the text.

Here is the code you can plug and play into an .html to get my problem:

<html>
<style>
div.container {
    margin: 0 auto;
}
</style>
<head>
<title>Card Launch Page!</title>
 <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
</head>
<body>
<br />
<br />
<br />
<div class="container">
<div class="card">
    <div class="card-content">
      <p><center>Card Page!</center></p>
    </div>
    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
        <li class="tab"><a class="active" href="#test4">Tab 1</a></li>
        <li class="tab"><a href="#test5">Tab 2</a></li>
        <li class="tab"><a href="#test6">Tab 3</a></li>
      </ul>
    </div>
    <div class="card-content grey lighten-4">
      <div id="test4" class="active" style="display: block;">Test 1 (Corresponds to Tab 1)</div>
      <div id="test5">Test 2 (Corresponds to Tab 2)</div>
      <div id="test6">Test 3 (Corresponds to Tab 3)</div>
    </div>
  </div>
</div>
</body>
</html>

My goal is to get the tabs to display the corresponding text. For an example, Tab 1 should display Test 1 (Corresponds to Tab 1) and only that. As of right now, the tabs don't work and all three lines of text are visible.

Solution

  • Materialize depends on having Jquery, which you can include from: https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js

    Following is your code, but working without changes, by including JQuery using the Stack Overflow code editor feature.

    div.container {
    margin: 0 auto;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<br />
<br />
<br />
<div class="container">
<div class="card">
    <div class="card-content">
      <p><center>Card Page!</center></p>
    </div>
    <div class="card-tabs">
      <ul class="tabs tabs-fixed-width">
        <li class="tab"><a class="active" href="#test4">Tab 1</a></li>
        <li class="tab"><a href="#test5">Tab 2</a></li>
        <li class="tab"><a href="#test6">Tab 3</a></li>
      </ul>
    </div>
    <div class="card-content grey lighten-4">
      <div id="test4" class="active" style="display: block;">Test 1 (Corresponds to Tab 1)</div>
      <div id="test5">Test 2 (Corresponds to Tab 2)</div>
      <div id="test6">Test 3 (Corresponds to Tab 3)</div>
    </div>
  </div>
</div>