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>