Question

我正在使用foundation 5 vertical tabs。它工作正常，但点击标签会在网址中添加ID。

<dl class="tabs vertical" data-tab>
  <dd class="active"><a href="#panel1">Tab 1</a></dd>
  <dd><a href="#panel2">Tab 2</a></dd>
  <dd><a href="#panel3">Tab 3</a></dd>
</dl>

<div class="tabs-content">
  <div class="content active" id="panel1">
    <p>tab1</p>
  </div>
  <div class="content" id="panel2">
    <p>tab2.</p>
  </div>
  <div class="content" id="panel3">
    <p>tab3.</p>
  </div>
</div>

http://localhost:3000/#panel1

http://localhost:3000/#panel2

http://localhost:3000/#panel3

我不希望href显示在网址中。我可以通过任何选项来避免URL吗？

编辑：在foundation tab page中，他们显示了一系列标签示例，并且在他们的示例中，锚点没有添加到URL中，因此必须有一个选项来避免它，这在文档中没有提到。

Answer 1

没有没有......你正在使用id的锚作为它应该瞄准的地方的符号。

Answer 2

在您关联的同一页面上，有一条关于深层链接的信息

启用深层链接集data-options="deep_linking:true"。如果然后，位置哈希映射到选项卡内容窗格中的元素ID 相应的选项卡将变为活动状态，浏览器窗口将显示滚动到指定的元素。如果你不想滚动到指定的元素然后设置data-options="scroll_to_content: false"。

如果您需要，我会尝试将scroll_to_content和deep_linking设为假

Answer 3

$("ul.tabs li a").bind('click', function (e) {
                e.preventDefault();
 });

以上代码将解决您的问题

如何避免基础垂直标签网址？

3 个答案: