我是 Web 开发的新手,我正在使用 Materialise 进行我目前正在从事的元素。我的导航栏代码已附上,出于某种原因,我可以点击并点击侧边栏中的链接,但不能点击 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>
最佳答案
我遇到过一系列这样的问题。
通常您需要更深入地查看文档。在这种情况下,导航栏组件文档不会在其示例代码中解决该问题。您需要查看文档的 javascript>tabs 部分,以发现有关选项卡如何工作的更多详细信息。
http://materializecss.com/tabs.html#external
By default, Materialize tabs will ignore their default anchor behaviour. To force a tab to behave as a regular hyperlink, just specify the target property of that link!
普通 anchor (<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>
关于html - 链接在 Materialise 选项卡中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46006948/