Javascript 选项卡系统3×3项

我试着用不同的词编一本字典。我想在单词下显示定义。台式机为3乘3，平板电脑为2乘2，手机为1乘1（手风琴系统）

我在列表的每个li中添加了一个

数据链接

属性，在每个div中添加了一个

数据内容

属性

我尝试将每个

数据链接

与每个

数据内容

<ul class="tabs">
    <li><a href="#" data-link="0">Word 01</a></li>
    <li><a href="#" data-link="1">Word 02</a></li>
    <li><a href="#" data-link="2">Word 03</a></li>
    <li><a href="#" data-link="3">Word 04</a></li>
    <li><a href="#" data-link="4">Word 05</a></li>
    <li><a href="#" data-link="5">Word 06</a></li>
</ul>

<div class="tab-content">
    <div data-content="0">Definition of word 01</div>
    <div data-content="1">Definition of word 02</div>
    <div data-content="2">Definition of word 03</div>
    <div data-content="3">Definition of word 04</div>
    <div data-content="4">Definition of word 05</div>
    <div data-content="5">Definition of word 06</div>
</div>

单词01的定义
单词02的定义
单词03的定义
单词04的定义
单词05的定义
单词06的定义

桌面版：

手机版：

---

此列表将由Wordpress生成。一开始我们会得到50个单词，100个单词之后。定义将由Wordpress在HTML页面中自动注入PHP。因此，列表必须是动态的。能给我点帮助吗？

我不确定这是否是你想要的答案，但我试了一下

我首先将HTML重组为更合适的格式。然后我添加了CSS，它在大于544px的设备上只显示类处于活动状态的定义

然后在jQuery中使用一个简单的点击，它在定义之间切换

$（'.section.word'）。在（'click'，function（）上{
$（this）.closest（'.container'）.sides（）.andSelf（）.find（'.section.definition'）.removeClass（'active'）；
$（this）.next（'.definition'）.addClass（'active'）；
});
hr{
显示：无；
}
.container{}
.container.section{}
.container.section.word{}
.容器.节.定义{
显示：无；
}
.container.section.definition.active{
显示：块；
}
@仅介质屏幕和（最小宽度：544px）{
人力资源{
显示：块；
}
.集装箱{
显示器：flex；
弯曲方向：行；
}
.货柜组{
弹性：1；
}
.container.section.word{}
.container.section.definition{}
}

一个

文本一
两个

文本二

三个

文本三


四个

文本四

五个

文本五

六个

文本六

你的问题确实不清楚，部分原因是你的英语不是很好。你能创建一个图像，这样你就能更清楚地了解你想要达到的目标吗？@AndreiGheorghiu，很抱歉我的英语不好，我用一张图片更新了我的帖子。所以你想在相同的空间显示1、2和3的定义，在相同的空间显示4、5和6的定义，等等？@AndreiGheorghiu，没错！但我希望每个李都在同一个列表中，而不是分开。因为在手机版中，每个定义都会在每个单词下面。谢谢你花时间在上面。事实上，我试图一次显示一个定义。在移动版本中，定义将像手风琴一样显示。是的，它的工作原理与您的图像完全相同。只需增加/减少浏览器窗口：）我已更新了我的答案。这应该是您正在寻找的解决方案！谢谢。是的，在移动设备中这是很好的，但是对于桌面版本来说没有，因为我必须一次显示一个单词。好的，这是一个更简单的解决方案。我已经为您更新了代码