Separation of Tabs

Asked

Viewed 32 times

1

I performed the separation in Tabs of two sections, however they are not divided and end up leaving in the same separation, regardless of which separation I click.

I’d like you to stay on screen, just one tab at a time.

<!DOCTYPE html>
<html>
    <head>
        <title>Igreja, que Horas?</title>        
        <meta name="viewreport" content="width=device-width, inicial-scale=1">
        <meta charset="utf-8">
        <link href="icons/material.css" rel="stylesheet">
        <link href="css/materialize.min.css" rel="stylesheet">
    </head>
    <body>
        
        <ul class="tabs yellow darken-4">
            <li class="tab"><a href="#geral" class="white-text waves-effect waves-light">Geral</a></li>
            <li class="tab"><a href="#celula" class=" white-text waves-effect waves-light">Grupo Caseiro/Célula</a></li>
        </ul>
        
        <div id="geral" class="section">
            <div class="collection">
                <a class="collection-item waves-effect black-text">18/08/18 09:30</a>
                <a class="collection-item waves-effect black-text">25/08/18 19:00</a>
                <a class="collection-item waves-effect black-text">27/08/18 20:30</a>
                <a class="collection-item waves-effect black-text">30/08/18 19:30</a>
            </div>
        </div>
        
        <div id="celula" class="section">
            <div class="collection">
                <a class="collection-item waves-effect black-text">17/08/18 09:30</a>
                <a class="collection-item waves-effect black-text">24/08/18 19:00</a>
                <a class="collection-item waves-effect black-text">28/08/18 20:30</a>
                <a class="collection-item waves-effect black-text">01/09/18 19:30</a>
            </div>
        </div>
        
        <script src="js/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="js/materialize.min.js"></script>
    </body>
</html>

html html5 materialize

  • Which version of Materialize you are using?

  • I downloaded the current version materialize-v1.0.0-rc.2.

1 answer

2

Gabriel first do not call jQuery twice as you are doing in your document. Use only the CDN or the version that is in your directory. Or else CDN with a fallback to the directory version if CDN fails.

In addition you need to "start" the Tabs component with this script as you can see in the official documentation. https://materializecss.com/tabs.html

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

See here your component working just by making these adjustments.

<!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-rc.2/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>


    <ul class="tabs yellow darken-4">
        <li class="tab"><a href="#geral" class="white-text waves-effect waves-light">Geral</a></li>
        <li class="tab"><a href="#celula" class=" white-text waves-effect waves-light">Grupo Caseiro/Célula</a></li>
    </ul>
    
    <div id="geral" class="section">
        <div class="collection">
            <a class="collection-item waves-effect black-text">18/08/18 09:30</a>
            <a class="collection-item waves-effect black-text">25/08/18 19:00</a>
            <a class="collection-item waves-effect black-text">27/08/18 20:30</a>
            <a class="collection-item waves-effect black-text">30/08/18 19:30</a>
        </div>
    </div>
    
    <div id="celula" class="section">
        <div class="collection">
            <a class="collection-item waves-effect black-text">17/08/18 09:30</a>
            <a class="collection-item waves-effect black-text">24/08/18 19:00</a>
            <a class="collection-item waves-effect black-text">28/08/18 20:30</a>
            <a class="collection-item waves-effect black-text">01/09/18 19:30</a>
        </div>
    </div>


    <!--JavaScript at end of body for optimized loading-->
    <!--jQuery-->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <!--JS do Framework-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

     <!-- Script para inicializar o componente Tabs -->
     <script>
        $(document).ready(function(){
            $('.tabs').tabs();
        });
     </script>
  </body>
</html>

Browser other questions tagged html html5 materialize

You are not signed in. Login or sign up in order to post.