Question

我正在使用带有Ember项目的Bootstrap，并且以下标记会生成可在桌面上运行的导航标签，但在Chrome和＆amp; Safari 6是iPhone。

以下是制作的标记：

<nav>
  <ul class="nav nav-tabs">
    <li id="ember611" class="ember-view active">  
      <a>Tab 1</a>
    </li>
    <li id="ember612" class="ember-view">     
      <a>Tab 2</a>
    </li>
  </ul>
</nav>

点击Tab 2不起作用。有什么建议吗？

以下是生成此HTML的HtmlBars：

<nav>
    <ul class="nav nav-tabs">
      {{#link-to "foo.bar.tab1" tagName="li" role="presentation"}}
          <a href={{view.href}}>Matches</a>
      {{/link-to}}
      {{#link-to "foo.bar.tab2" tagName="li" role="presentation"}}
          <a href={{view.href}}>Standings</a>
      {{/link-to}}
    </ul>
</nav>

我使用的是Bootstrap 3.3.4和Ember 1.3

Answer 1

您使用li元素作为链接时，他们确实不应该这样做。这可以在某些浏览器中使用，但它不符合标准。我通常做这样的事情：

{{#link-to 'foo.bar.tab1' tagName='li' href='false'}}
    {{link-to 'Matches' 'foo.bar.tab1' role='presentation'}}
{{/link-to}}

这会使a标记成为实际链接（可在浏览器中使用），但仍会将active类添加到li元素。

iPhone的Bootstrap Nav-tabs失败

1 个答案: