Tab system 3 by 3 items

Question

我试着用不同的词创建词典。我想用文字显示定义。台式机3×3，平板电脑2×2和手机1×1（手风琴系统）。

我在每个列表中添加了一个data-link属性，并在每个div中添加了data-content属性。

我尝试每个data-link每个data-content

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

https://jsfiddle.net/Xroad/qbh79xoy/27/

桌面版本相匹配：

手机版：

这份名单由WordPress的产生。在开始时，我们将获得50个单词并在100之后。定义将通过HTML页面中的Wordpress自动注入PHP。所以列表必须是动态的。我可以帮忙吗？

Answer 1

我不确定这是否是您正在寻找的答案，但我放弃了它。

我从重构HTML开始，转变为更合适的格式。然后我添加了CSS，它在大于544px的设备上只会显示活动类的定义。

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

$('.section .word').on('click', function(){ 
 
    $(this).closest('.container').siblings().andSelf().find('.section .definition').removeClass('active'); 
 
    $(this).next('.definition').addClass('active'); 
 
});

hr { 
 
    display: none; 
 
} 
 

 
.container {} 
 

 
.container .section {} 
 

 
.container .section .word {} 
 

 
.container .section .definition { 
 
    display: none; 
 
} 
 

 
.container .section .definition.active { 
 
    display: block; 
 
} 
 

 
@media only screen and (min-width: 544px) { 
 
    hr { 
 
    display: block; 
 
    } 
 
    .container { 
 
    display: flex; 
 
    flex-direction: row; 
 
    } 
 
    .container .section { 
 
    flex: 1; 
 
    } 
 
    .container .section .word {} 
 
    .container .section .definition {} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="container"> 
 
    <div class="section"> 
 
    <p class="word">One</p> 
 
    <p class="definition active">Text text one</p> 
 
    </div> 
 
    <div class="section"> 
 
    <p class="word">Two</p> 
 
    <p class="definition">Text text two</p> 
 
    </div> 
 
    <div class="section"> 
 
    <p class="word">Three</p> 
 
    <p class="definition">Text text three</p> 
 
    </div> 
 
</div> 
 

 
<hr> 
 

 
<div class="container"> 
 
    <div class="section"> 
 
    <p class="word">Four</p> 
 
    <p class="definition">Text text four</p> 
 
    </div> 
 
    <div class="section"> 
 
    <p class="word">Five</p> 
 
    <p class="definition">Text text five</p> 
 
    </div> 
 
    <div class="section"> 
 
    <p class="word">Six</p> 
 
    <p class="definition">Text text six</p> 
 
    </div> 
 
</div>