<p>minhf muốn thiết kế 1 tab mà có thể lấy hình ảnh làm tiêu đề cho tab nhưng <tabber> lại không cho phép nên mình tự tạo 1 tab theo ý muốn. Mặc dù mình đã thử nghiệm tab này trên 1 live server và hoạt động thành công nhưng khi mình sử dụng trên wiki thì nó lại không hoạt động. Ad có thể xem giúp mình với
<i>
Mã HTML</i>
</p>
<div dir="ltr" class="mw-geshi mw-content-ltr"><div class="html5 source-html5">
<span class="sc2"><<span class="kw2">ul</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"tabs"</span>></span>
<span class="sc2"><<span class="kw2">li</span> data-tab-<span class="kw3">target</span><span class="sy0">=</span><span class="st0">"#LLSStar"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"active tab"</span>></span>[[Tập tin:Love Live! Super Star Logo.png|150px|link=]]<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">li</span> data-tab-<span class="kw3">target</span><span class="sy0">=</span><span class="st0">"#LL"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"tab"</span>></span>[[File:Love Live! Logo.png|180px|link=]]<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="kw2">li</span> data-tab-<span class="kw3">target</span><span class="sy0">=</span><span class="st0">"#LLSS"</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"tab></span></span>[[File:Love Live! Sunshine Logo.png|150px|link=]]<span class="sc2"><<span class="sy0">/</span><span class="kw2">li</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">ul</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"tab-content"</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"LLSStar"</span> data-tab-<span class="kw3">content</span> <span class="kw3">class</span><span class="sy0">=</span><span class="st0">"active"</span>></span>
<span class="sc2"><<span class="kw2">h1</span>></span>Love Live! Super Star<span class="sc2"><<span class="sy0">/</span><span class="kw2">h1</span>></span>
<span class="sc2"><<span class="kw2">p</span>></span>Test 1<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"LL"</span> data-tab-content></span>
<span class="sc2"><<span class="kw2">h1</span>></span>Love Live!<span class="sc2"><<span class="sy0">/</span><span class="kw2">h1</span>></span>
<span class="sc2"><<span class="kw2">p</span>></span>Test 1<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="kw2">div</span> <span class="kw3">id</span><span class="sy0">=</span><span class="st0">"LLSS"</span> data-tab-content></span>
<span class="sc2"><<span class="kw2">h1</span>></span>Love Live! SunShine<span class="sc2"><<span class="sy0">/</span><span class="kw2">h1</span>></span>
<span class="sc2"><<span class="kw2">p</span>></span>Test 1<span class="sc2"><<span class="sy0">/</span><span class="kw2">p</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span>
<span class="sc2"><<span class="sy0">/</span><span class="kw2">div</span>></span></div></div>
<p><i>
Mã CSS</i>
</p>
<div dir="ltr" class="mw-geshi mw-content-ltr"><div class="css source-css">
<span class="br0">[</span>data-tab-content<span class="br0">]</span> <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="br0">}</span>
.active<span class="br0">[</span>data-tab-content<span class="br0">]</span> <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
<span class="br0">}</span>
body <span class="br0">{</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.tabs</span> <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> <span class="kw2">block</span><span class="sy0">;</span>
justify-content<span class="sy0">:</span> space-around<span class="sy0">;</span>
<span class="kw1">list-style-type</span><span class="sy0">:</span> <span class="kw2">none</span><span class="sy0">;</span>
<span class="kw1">margin</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="nu0">0</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.tab</span> <span class="br0">{</span>
<span class="kw1">display</span><span class="sy0">:</span> inline-block<span class="sy0">;</span>
<span class="kw1">cursor</span><span class="sy0">:</span> <span class="kw2">pointer</span><span class="sy0">;</span>
<span class="kw1">padding</span><span class="sy0">:</span> <span class="re3">10px</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.tab</span><span class="re1">.active</span> <span class="br0">{</span>
<span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#CCC</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.tab</span><span class="re2">:hover </span><span class="br0">{</span>
<span class="kw1">background-color</span><span class="sy0">:</span> <span class="re0">#AAA</span><span class="sy0">;</span>
<span class="br0">}</span>
<span class="re1">.tab-content</span> <span class="br0">{</span>
<span class="kw1">margin-left</span><span class="sy0">:</span> <span class="re3">20px</span><span class="sy0">;</span>
<span class="kw1">margin-right</span><span class="sy0">:</span> <span class="re3">20px</span><span class="sy0">;</span>
<span class="br0">}</span></div></div>
<p><i>
Mã Scripts</i>
</p>
<div dir="ltr" class="mw-geshi mw-content-ltr"><div class="javascript source-javascript">
<span class="kw1">const</span> tabs <span class="sy0">=</span> document.<span class="me1">querySelectorAll</span><span class="br0">(</span><span class="st0">'[data-tab-target]'</span><span class="br0">)</span>
<span class="kw1">const</span> tabContents <span class="sy0">=</span> document.<span class="me1">querySelectorAll</span><span class="br0">(</span><span class="st0">'[data-tab-content]'</span><span class="br0">)</span>
tabs.<span class="me1">forEach</span><span class="br0">(</span>tab <span class="sy0">=></span> <span class="br0">{</span>
tab.<span class="me1">addEventListener</span><span class="br0">(</span><span class="st0">'click'</span><span class="sy0">,</span> <span class="br0">(</span><span class="br0">)</span> <span class="sy0">=></span> <span class="br0">{</span>
<span class="kw1">const</span> target <span class="sy0">=</span> document.<span class="me1">querySelector</span><span class="br0">(</span>tab.<span class="me1">dataset</span>.<span class="me1">tabTarget</span><span class="br0">)</span>
tabContents.<span class="me1">forEach</span><span class="br0">(</span>tabContent <span class="sy0">=></span> <span class="br0">{</span>
tabContent.<span class="me1">classList</span>.<span class="me1">remove</span><span class="br0">(</span><span class="st0">'active'</span><span class="br0">)</span>
<span class="br0">}</span><span class="br0">)</span>
tabs.<span class="me1">forEach</span><span class="br0">(</span>tab <span class="sy0">=></span> <span class="br0">{</span>
tab.<span class="me1">classList</span>.<span class="me1">remove</span><span class="br0">(</span><span class="st0">'active'</span><span class="br0">)</span>
<span class="br0">}</span><span class="br0">)</span>
tab.<span class="me1">classList</span>.<span class="me1">add</span><span class="br0">(</span><span class="st0">'active'</span><span class="br0">)</span>
target.<span class="me1">classList</span>.<span class="me1">add</span><span class="br0">(</span><span class="st0">'active'</span><span class="br0">)</span>
<span class="br0">}</span><span class="br0">)</span>
<span class="br0">}</span><span class="br0">)</span></div></div>