Question

我创建了一个显示很多结果的网站。然后可以使用选项卡过滤这些。这非常适合展示我的一部分内容。现在的问题是我想要一个名为＆＃34;显示全部＆＃34;它显示了所有选项卡的所有内容。我的第一个想法是简单地显示它们然后隐藏aria-hidden属性。

$('.tabs-content div').removeAttr('aria-hidden');
$('.tabs-content div').show();

它似乎首先作为＆＃34;显示全部＆＃34;选中选项卡，显示所有内容。问题是它会在我刷新之前打破其余选项卡。我也试过使用它，但这也不起作用。

$(document).foundation('tab', 'reflow');

我的最后一个想法是在新的内容部分中再次输出内容，但这似乎很愚蠢。

关于如何在不破坏基础且不加载所有内容x2的情况下如何执行此操作的任何想法？

提前致谢。

Answer 1

我看到你已经找到了解决方案。对于有这个问题的其他人来说，这应该有效：

在您的链接中添加id="all：

<dl class="sub-nav" data-tab>
 <dd><a href="#all" id="all">All</a></dd>
</dl>

并添加此代码：

<script type="text/javascript">
  $(document) .on('click', '#all', function(e) {
    $('.tabs-content div').addClass('active');
    $('#all').addClass('active');
  })
</script>

如果您收到错误，请在您的链接中添加：href="#all"。

基础 - 显示所有选项卡的内容

1 个答案: