マテリアライズのタブでリンクが機能しない

Question

私はウェブ開発には比較的新しいので、私は今作業中のプロジェクトにマテリアライズを使用しています。私のnavbarコードは何らかの理由で添付されていますが、サイドバーのリンクをクリックして、それに従うことができますが、nav-contentのタブには表示されません。私がulのtabs tabs-transparentクラスを取り出すと動作しますが、それは醜いです。私はJQueryをロードしています。これが私がグーグルでこの問題に遭遇した唯一の解決策でした。

<nav class="blue-grey lighten-1 nav-extended" role="navigation"> 
    <div class="nav-wrapper"> 
    <a id="logo-container" href="#" class="brand-logo center"><img src="/application/static/application/colorondarknotext.png" height=60px/></a> 
    <ul class="right hide-on-med-and-down"> 
     <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Welcome, (USERNAME)!<i class="material-icons right">arrow_drop_down</i></a></li> 
    </ul> 
    <ul id="nav-mobile" class="side-nav"> 
     <li class="no-padding"> 
     <ul class="collapsible collapsible-accordion"> 
      <li> 
      <a class="collapsible-header">Welcome, (USERNAME)!<i class="material-icons right">arrow_drop_down</i></a> 
      <div class="collapsible-body"> 
       <ul> 
       <li><a href="/profile">Account Info</a></li> 
       <li><a href="/accounts/logout">Log Out</a></li> 
       </ul> 
      </div> 
      </li> 
     </ul> 
     </li> 
     <li> 
     <div class="divider"></div> 
     </li> 
     <li><a href="/apply">Application</a></li> 
     <li><a href="/decision">Decisions</a></li> 
     <li><a href="/travel">Travel Information</a></li> 
    </ul> 
    <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a> 
    </div> 
    <div class="nav-content hide-on-med-and-down"> 
    <ul class="tabs tabs-transparent"> 
     <li class="tab"><a href="/apply">Application</a></li> 
     <li class="tab"><a href="/decision">Decisions</a></li> 
     <li class="tab"><a href="/travel">Travel Information</a></li> 
    </ul> 
    </div> 
</nav> 

Answer 1

このような一連の問題が発生しました。

一般的に、ドキュメントをより深く見る必要があります。この場合、navbarコンポーネントdocsはサンプルコードの問題を解決しません。タブの仕組みの詳細を調べるには、ドキュメントのjavascript> tabsセクションを参照する必要があります。デフォルトでは

http://materializecss.com/tabs.html#external

、マテリアライズタブは、デフォルトのアンカーの行動を無視します。タブを通常のハイパーリンクとして動作させるには、そのリンクのターゲットプロパティを指定するだけです。

通常のアンカー（<a>）機能は無効/無視されます。あなたのリンクを「通常」のように動作させるには、リンクにtarget属性を追加する必要があります。

同じウィンドウ内でリンクを開く場合は、<a>タグにtarget="_self"を追加します。

<li class="tab"><a href="/apply" target="_self">Application</a></li> 
<li class="tab"><a href="/decision" target="_self">Decisions</a></li> 
<li class="tab"><a href="/travel" target="_self">Travel Information</a></li>