鏈接在Materialise標籤中不起作用

我對Web開發相對陌生，而且我正在使用Materialize作爲我正在處理的項目。我的導航欄代碼已附加，出於某種原因，我可以點擊並按照邊欄中的鏈接進行操作，但不能在nav-content選項卡中進行操作。當我拿出ul中的tabs tabs-transparent類時，它可以工作，但看起來很難看。我正在加載JQuery-這是我在Google搜索時看到的唯一解決方案。鏈接在Materialise標籤中不起作用

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

來源

2017-09-01 laudiacay

添加您的CSS代碼。我的猜測是有一個隱藏在你身邊的元素。 – crazymatt

我的CSS和JS都只是股票Materialise的東西，沒有在我的style.css中，只是在我的init.js按鈕摺疊sidenav的東西 – laudiacay

如果您使用的是香草安裝，我會建議嘗試重新開始它正努力查看哪一步使其停止工作。根據你提供的代碼很難說。你看到你的控制檯有任何錯誤嗎？ – crazymatt

我遇到了一系列像這樣的問題。

通常您需要深入瞭解文檔。在這種情況下，導航欄組件文檔不會在其示例代碼中解決問題。您需要查看文檔的javascript>選項卡部分，以瞭解有關選項卡如何工作的更多詳細信息。

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

默認情況下，Materialise的標籤會忽略它們的默認錨行爲。要強制選項卡像常規超鏈接一樣運行，只需指定該鏈接的目標屬性即可！

正常錨（<a>）功能被禁用/忽略。爲了使您的鏈接像「正常」一樣工作，您需要爲鏈接添加target屬性。

假設您想在同一窗口中打開鏈接，您可以將target="_self"添加到每個<a>標籤。

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

來源

2017-10-02 18:15:55 mattpr

鏈接在Materialise標籤中不起作用

回答

相關問題