链接在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标签中不起作用

回答

相关问题