Separation of Tabs

Question

Separation of Tabs

Navigation

#1 by (2 votes)

1

I made the separation in Tabs of two sections, but they are not divided and end up coming in the same separation, regardless of which separation I click.

I would like it to be displayed, only 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><scriptsrc="js/materialize.min.js"></script>
    </body>
</html>

html html5 materialize

asked by anonymous 16.07.2018 / 20:19

1 answer

How to use the between command in codeigniter to generate report Redirect ActionResult

score 2 · Answer 1

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

In addition you need to "start" the TAB component with this script as you can consult in the official documentation. link

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

See here your working component only 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><!--JSdoFramework--><scriptsrc="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>