Links funktionieren nicht in Materialize Tabs

Question

Ich bin relativ neu in der Webentwicklung und verwende Materialise für das Projekt, an dem ich gerade arbeite. Mein Navbar-Code ist angehängt, aus irgendeinem Grund kann ich auf die Links in der Seitenleiste klicken und ihnen folgen, aber nicht in den nav-content Tabs. Wenn ich die tabs tabs-transparent Klassen in der ul herausnehmen, funktioniert es, aber es sieht hässlich aus. Ich lade JQuery - das war die einzige Lösung für dieses Problem, als ich gegoogelt habe.

<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

Ich bin in eine Reihe von Problemen wie diesem geraten.

Im Allgemeinen müssen Sie tiefer in die Dokumente schauen. In diesem Fall behandeln die Dokumente der Navbar-Komponente das Problem nicht in ihrem Beispielcode. Sie müssen im Abschnitt "javascript> tabs" der Dokumentation nachsehen, um weitere Details zur Funktionsweise der Registerkarten zu erhalten.

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

standardmäßig Materialise Registerkarten die Standardanker Verhalten ignorieren. Um zu erzwingen, dass sich ein Tab als normaler Hyperlink verhält, geben Sie einfach die Zieleigenschaft dieses Links an!

Die normale Ankerfunktion (<a>) ist deaktiviert/ignoriert. Damit Ihre Links wie "normal" funktionieren, müssen Sie Ihren Links ein target Attribut hinzufügen.

Angenommen, Sie möchten die Links im selben Fenster öffnen, würden Sie target="_self" zu jedem <a> Tag hinzufügen.

<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>