2016-05-03 2 views
-1

Вот моя структура materializecss, используя html-код ниже. Это первый раз, когда я пытался реализовать карту.на мой код, materializecss класс «card-discovery» не работает

Я не знаю, почему класс открывания карт не работает. пожалуйста, помогите мне в активном открытии карты. Спасибо.

<!doctype HTML> 
 
<html> 
 

 
<head> 
 
    <title>materialize cards</title> 
 
    <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/materialize/0.97.6/js/materialize.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
</head> 
 

 
<body> 
 
    <nav class="blue darken-2"> 
 
    <div class="navbar-wrapper container"> 
 
     <a href="#" class="brand-logo">MyMaterializecss</a> 
 

 
     <ul class="right"> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">PRODUCTS</a> 
 
     </li> 
 
     <li><a href="#">CONTACT</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col l4"> 
 
     <div class="card-panel pink white-text"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
     </div> 
 
     </div> 
 

 
     <div class="col l4"> 
 
     <div class="card-panel"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
     </div> 
 
     </div> 
 

 
     <div class="col l4"> 
 
     <div class="card"> 
 
      <div class="card-image waves-effect waves-block waves-light"> 
 
      <img class="activator" src="shuvonet-revised-front-end-03.png"> 
 
      </div> 
 
      <div class="card-content"> 
 
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> 
 
      <p><a href="#">This is a link</a> 
 
      </p> 
 
      </div> 
 
      <div class="card-reveal"> 
 
      <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span> 
 
      <p>Here is some more information about this product that is only revealed once clicked on.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <footer class="page-footer blue darken-2"> 
 
    <div class="container"> 
 
     <div class="footer-copyright"> 
 
     Copyright &copy; 2016 Jarin | All rights reserved. 
 
     </div> 
 
    </div> 
 
    </footer> 
 
</body> 
 

 
</html>

+0

@TimOgilvy фрагмент кода размещен. –

ответ

0

Ваша ошибка состоит в том: (CSS в теги сценария)

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"></script>

Замените его:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>

Там вы идете:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<!doctype HTML> 
 
<html> 
 

 
<head> 
 
    <title>materialize cards</title> 
 
    <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/materialize/0.97.6/js/materialize.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
</head> 
 

 
<body> 
 
    <nav class="blue darken-2"> 
 
    <div class="navbar-wrapper container"> 
 
     <a href="#" class="brand-logo">MyMaterializecss</a> 
 

 
     <ul class="right"> 
 
     <li><a href="#">HOME</a> 
 
     </li> 
 
     <li><a href="#">PRODUCTS</a> 
 
     </li> 
 
     <li><a href="#">CONTACT</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 

 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col 14"> 
 
     <div class="card-panel pink white-text"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
     </div> 
 
     </div> 
 

 
     <div class="col 14"> 
 
     <div class="card-panel"> 
 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col l4"> 
 
     <div class="card"> 
 
      <div class="card-image waves-effect waves-block waves-light"> 
 
      <img class="activator" src="shuvonet-revised-front-end-03.png"> 
 
      </div> 
 
      <div class="card-content"> 
 
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> 
 
      <p><a href="#">This is a link</a> 
 
      </p> 
 
      </div> 
 
      <div class="card-reveal"> 
 
      <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span> 
 
      <p>Here is some more information about this product that is only revealed once clicked on.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 

 
    <footer class="page-footer blue darken-2"> 
 
    <div class="container"> 
 
     <div class="footer-copyright"> 
 
     Copyright &copy; 2016 Jarin | All rights reserved. 
 
     </div> 
 
    </div> 
 
    </footer> 
 
</body> 
 

 
</html>

+0

извините за эту глупую ошибку. но еще не работает. PLS проверить его воспроизведения кода. Спасибо. –

+0

Является ли приведенный выше фрагмент работы для вас? –

+0

Да. Работает. Спасибо. скриптовый тег о html, нужен ли он? @Ani Menon –

1

Вообще это хорошо импортировать js файлы в конце тела, чтобы уменьшить время загрузки страницы.

А также импортировать jQuery перед импортом materialize.js

Вот jsfiddle

<!doctype HTML> 
<html> 

<head> 
    <title>materialize cards</title> 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

</head> 

<body> 
    <nav class="blue darken-2"> 
    <div class="navbar-wrapper container"> 
     <a href="#" class="brand-logo">MyMaterializecss</a> 

     <ul class="right"> 
     <li><a href="#">HOME</a> 
     </li> 
     <li><a href="#">PRODUCTS</a> 
     </li> 
     <li><a href="#">CONTACT</a> 
     </li> 
     </ul> 
    </div> 
    </nav> 

    <div class="container"> 
    <div class="row"> 
     <div class="col l4"> 
     <div class="card-panel pink white-text"> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
     </div> 
     </div> 

     <div class="col l4"> 
     <div class="card-panel"> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
      survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
     </div> 
     </div> 

     <div class="col l4"> 
     <div class="card"> 
      <div class="card-image waves-effect waves-block waves-light"> 
      <img class="activator" src="shuvonet-revised-front-end-03.png"> 
      </div> 
      <div class="card-content"> 
      <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> 
      <p><a href="#">This is a link</a> 
      </p> 
      </div> 
      <div class="card-reveal"> 
      <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span> 
      <p>Here is some more information about this product that is only revealed once clicked on.</p> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 

    <footer class="page-footer blue darken-2"> 
    <div class="container"> 
     <div class="footer-copyright"> 
     Copyright &copy; 2016 Jarin | All rights reserved. 
     </div> 
    </div> 
    </footer> 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script> 
</body> 

</html> 
Смежные вопросы