链接在“材质”选项卡中不起作用

时间:2017-09-01 19:37:13

标签: html css materialize

我对Web开发比较陌生,而且我正在使用Materialize来处理我正在进行的项目。我的导航栏代码已附加,出于某种原因,我可以点击并按照侧边栏中的链接进行操作,但不能点击nav-content标签中的链接。当我取出tabs tabs-transparent中的ul类时,它可以工作,但看起来很难看。我正在加载JQuery-这是我用Google搜索时遇到的唯一解决方案。

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

1 个答案:

答案 0 :(得分:1)

我遇到过这样的一系列问题。

通常,您需要深入了解文档。在这种情况下,导航栏组件文档不会在其示例代码中解决问题。您需要查看文档的javascript&gt;标签部分,以了解有关标签如何工作的更多详细信息。

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

  

默认情况下,Materialize选项卡将忽略其默认锚定行为。要强制选项卡表现为常规超链接,只需指定该链接的目标属性即可!

禁用/忽略常规锚点(<a>)功能。为了使您的链接像&#34;正常&#34;您需要在链接中添加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>