遷移が動作しません

これは私のコードです。 Materialize.showStaggeredList（）はボタンをクリックしても起動しません。ボタンをクリックしようとすると、ブラウザウィンドウの横にあるリンクにサインアップしたいが、ボタンのクリックは発砲しない。私はMaterializeの文書を見てそれに応じて動作しましたが失敗しました。任意のヘルプ遷移が動作しません

<!doctype html> 


<html lang="en"> 

<head> 

    <style type="text/css"> 
    html 
     { 

      height: 100%; 
      background: url(Images/234.jpg) no-repeat center center; 
      background-size: cover; 
     } 

    </style> 

    <title>HelpingO</title> 
    <link rel="stylesheet" href="materialize/css/materialize.min.css" /> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
    <link rel="stylesheet" href="materialize/css/materialize.css" /> 

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

</head> 
<body> 
    <nav style="background-color:#554253"> 

     <div class="navbar-wrapper"> 
      <a href="#" class="brand-logo col s2 left-align"> 
       <img src="Images/AWT-Plane.png" style="width:40px; position:relative;top:10px;" /> 
       HelpingO</a> 
      <ul class="right hide-on-med-and-down"> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">About Us</a></li> 
      </ul> 
      <ul id="nav-mobile" class="side-nav"> 
     <li><a href="#">Home</a></li> 

     </ul> 
     <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a> 

     </div> 
     <div class="navbar-wrapper col s3"> 
      <div class="col s12 m12 l12 right-align"> 
      <a href="#!" class="btn" onclick="materialize.showStaggeredList('#staggered-test')">Click Me</a> </div> 
     </div> 
    </nav> 
    <ul id="staggered-test" class="right"> 
    <li style="opacity:0"><a href="#!" class="btn-floating btn-large red"><i class="material-icons">email</i></a></li> 
    <li style="opacity:0"><a href="#!" class="btn-floating btn-large cyan"><i class="material-icons">web</i></a></li> 
    <li style="opacity:0"><a href="#!" class="btn-floating btn-large blue"><i class="material-icons">android</i></a></li> 
    </ul> 


    <div class="container"> 
    <div class="section no-pad-bot"> 
     <div class="container"> 
     <br><br> 
     <h2 class="header center" style="color:#443355">Finding Travel Companion Seems Impossible?</h2> 
     <div class="row center"> 
      <h5 class="header col s12 dark">Want to pay less when flying to India?</h5> 
     </div> 
     <div class="row center"> 
      <a href="#" class="btn-large waves-effect waves-light teal dark-25">Get Started</a> 
     </div> 
     <br><br> 
     </div> 
    </div> 
    </div> 
    </body> 
<html>

出典

2017-02-24 Harneet Singh

あなたが間違った順序でスクリプトを宣言したようです。それが最初にロードする必要があるので、マテリアライズは、jQueryのを使用しています -

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

その後、あなたは（首都「M」に注意してください）Materializeからmaterializeを変更する必要があります動作するようにあなたの互い違いのリストを取得する -

<a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a> </div>

を完全に

（作業） -

<!doctype html> 
 

 

 
<html lang="en"> 
 

 
<head> 
 

 
    <style type="text/css"> 
 
    html { 
 
     height: 100%; 
 
     background: url(Images/234.jpg) no-repeat center center; 
 
     background-size: cover; 
 
    } 
 
    </style> 
 

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

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

 
</head> 
 

 
<body> 
 
    <nav style="background-color:#554253"> 
 

 
    <div class="navbar-wrapper"> 
 
     <a href="#" class="brand-logo col s2 left-align"> 
 
     <img src="Images/AWT-Plane.png" style="width:40px; position:relative;top:10px;" /> HelpingO 
 
     </a> 
 
     <ul class="right hide-on-med-and-down"> 
 
     <li><a href="#">Contact</a></li> 
 
     <li><a href="#">Services</a></li> 
 
     <li><a href="#">About Us</a></li> 
 
     </ul> 
 
     <ul id="nav-mobile" class="side-nav"> 
 
     <li><a href="#">Home</a></li> 
 

 
     </ul> 
 
     <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a> 
 

 
    </div> 
 
    <div class="navbar-wrapper col s3"> 
 
     <div class="col s12 m12 l12 right-align"> 
 
     <a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a> </div> 
 
    </div> 
 
    </nav> 
 
    <ul id="staggered-test" class="right"> 
 
    <li style="opacity:0"><a href="#!" class="btn-floating btn-large red"><i class="material-icons">email</i></a></li> 
 
    <li style="opacity:0"><a href="#!" class="btn-floating btn-large cyan"><i class="material-icons">web</i></a></li> 
 
    <li style="opacity:0"><a href="#!" class="btn-floating btn-large blue"><i class="material-icons">android</i></a></li> 
 
    </ul> 
 

 

 
    <div class="container"> 
 
    <div class="section no-pad-bot"> 
 
     <div class="container"> 
 
     <br><br> 
 
     <h2 class="header center" style="color:#443355">Finding Travel Companion Seems Impossible?</h2> 
 
     <div class="row center"> 
 
      <h5 class="header col s12 dark">Want to pay less when flying to India?</h5> 
 
     </div> 
 
     <div class="row center"> 
 
      <a href="#" class="btn-large waves-effect waves-light teal dark-25">Get Started</a> 
 
     </div> 
 
     <br><br> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 
<html>

出典

2017-02-24 14:51:07

問題が解決しました。ありがとう –

まだstagerredリストは動作していません –

@HarneetSingh 'Materialize.showStaggeredList'で大文字の' M'を使いましたか？ –

答えて

関連する問題