BBCode: tab & tabs

[Tendou]

Cú pháp:

CodeColon Select All Code

[tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs]

Ứng dụng:

Nội dung tab 1

Nội dung tab 2

[Thiên Thần Chuối]

Bạn muốn tuỳ chỉnh BBCode TAB? Vậy thì bài viết này dành cho bạn. ~

Tệp tin CSS của tab nằm ở tabber.css. Bài viết dưới đây sẽ giải thích DOM của tab, từ đó hướng dẫn tuỳ chỉnh tab bằng bbcode MYSTYLE và STYLE. Nếu bạn chỉ view source code (phím tắt Ctrl + U trong Chrome và FireFox) sẽ không thấy hết toàn bộ phiên bản HTML của tab, mà phải inspect element (Ctrl + Shift + I trong Chrome và FireFox).


DOM của trang web - Nơi mọi bí ẩn được tiết lộ

Vùng đỏ mình khoanh trong DOM trên tương ứng với đoạn bbcode dưới đây:

Nội dung tab 1

Nội dung tab 2

CodeColon Select All Code

[div=|mytab|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div]

Dưới đây là phần giải thích cho các class nằm trong vùng đỏ trên:

• mytab: Class này là do mình đặt thêm, để các bbcode có dạng [style=.mytab ...] chỉ ảnh hưởng đến các tab được bọc trong class mytab. Cái mytab này đương nhiên có thể được thay bằng cái tên khác tuỳ bạn. Bạn thậm chí có thể dùng ID thay cho class nếu bạn hiểu rõ sự khác biệt giữa ID và class.
• tabberlive: Class này là class mặc định, bao bọc toàn bộ tab.
• tabbernav: Chứa các tiêu đề của tab.
  
  • tabberactive: Class này xuất hiện ở li nào thì có nghĩa là nội dung tab của li đó đang được chọn để hiển thị. Ví dụ:
    
    • Khi tab 1 được chọn
      
      thì DOM có dạng:
      

      <ul class="tabbernav">
      <li class="tabberactive"><a href="javascript:void(null);" title="Tab 1">Tab 1</a></li>
      <li class=""><a href="javascript:void(null);" title="Tab 2">Tab 2</a></li>
      </ul>
      

    • Khi tab 2 được chọn
      
      thì DOM có dạng:
      

      <ul class="tabbernav">
      <li class=""><a href="javascript:void(null);" title="Tab 1">Tab 1</a></li>
      <li class="tabberactive"><a href="javascript:void(null);" title="Tab 2">Tab 2</a></li>
      </ul>
      

• tabbertab: Chứa nội dung của một tab bất kỳ.
• tabbertabhide: Class này xuất hiện ở những tab không được chọn. Ví dụ:
  
  • Khi tab 1 được chọn
    
    thì DOM có dạng:
    

    <div class="tabbertab " title="">Nội dung tab 1</div>
    <div class="tabbertab tabbertabhide" title="">Nội dung tab 2</div>
    

  • Khi tab 2 được chọn
    
    thì DOM có dạng:
    

    <div class="tabbertab tabbertabhide" title="">Nội dung tab 1</div>
    <div class="tabbertab " title="">Nội dung tab 2</div>
    

Song phần giải thích trên vẫn chưa phải tất cả, bạn cần phải đọc nội dung của tệp tin tabber.css nữa để khi sử dụng bbcode style lên tab thì còn biết lỗi tại thằng tabber.css chứ không phải do Định Mệnh. Trong trường hợp bạn lười đọc tệp tin trên hoặc sao sao đó thích mì ăn liền hơn thì ở dưới đây có mì ăn liền cho bạn.

Phá những thuộc tính CSS cũ

Đương nhiên không phải phá hoàn toàn, mà chỉ là chỉnh nó về mức sơ khai vừa đủ để bạn có thể dễ dàng bắt tay vào tạo style mới cho tab. Để không ảnh hưởng đến các tab còn lại trong bài, mình mạn phép tăng mytab lên mytab1, mytab2,v.v... qua từng ví dụ.

Nội dung tab 1

Nội dung tab 2

CodeColon Select All Code

[mystyle][div=|mytab1|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab1 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab1 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab1 .tabbertab]border: none;[/style]

[/div][/mystyle]


CodeColon Select All Code

[style=.mytab1 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab1 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab1 .tabbertab]border: none;[/style]


Trang trí phần tiêu đề của tab

Trong tabber.css thì nó đã sớm định nghĩa một vài thuộc tính cho tiêu đề ở các HTML element sau:

• ul.tabbernav li a:
  Bạn có thể chỉnh thuộc tính padding, margin, border, background,v.v... (trừ color) của bất kỳ tiêu đề tab nào.
  
  Nội dung tab 1

  Nội dung tab 2

  
  
  
  
  
  
  

  CodeColon Select All Code

  [mystyle][div=|mytab2|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab2 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab2 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab2 .tabbertab]border: none;[/style]

[style=.mytab2 ul.tabbernav li a]background: red; text-decoration: underline; padding: 50px; margin: 50px;[/style]

[/div][/mystyle]

  CodeColon Select All Code

  [style=.mytab2 ul.tabbernav li a]background: red; text-decoration: underline; padding: 50px; margin: 50px;[/style]

  
  Đối với thuộc tính color thì nó chỉ gây ảnh hưởng lên những tiêu đề của những tab đang không được chọn (những li không có class .tabberactive).
  
  Nội dung tab 1

  Nội dung tab 2

  
  
  
  
  
  
  

  CodeColon Select All Code

  [mystyle][div=|mytab3|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab3 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab3 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab3 .tabbertab]border: none;[/style]

[style=.mytab3 ul.tabbernav li a]color: blue;[/style]

[/div][/mystyle]

  CodeColon Select All Code

  [style=.mytab3 ul.tabbernav li a]color: blue;[/style]

• ul.tabbernav li a:hover: Là phiên bản của tiêu đề tab khi hover chuột qua tiêu đề tab của ul.tabbernav li a, có giới hạn về thuộc tính color tương tự như ul.tabbernav li a. Riêng thuộc tính background nếu muốn chỉnh thì phải thêm !important.
  
  Nội dung tab 1

  Nội dung tab 2

  
  
  
  
  
  
  

  CodeColon Select All Code

  [mystyle][div=|mytab4|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab4 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab4 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab4 .tabbertab]border: none;[/style]

[style=.mytab4 ul.tabbernav li a:hover]background: blue !important;[/style]

[/div][/mystyle]

  CodeColon Select All Code

  [style=.mytab4 ul.tabbernav li a:hover]background: blue !important;[/style]

• ul.tabbernav li.tabberactive a: Là phiên bản tiêu đề tab khi tab đang được chọn (li có class .tabberactive) của ul.tabbernav li a, ở đây bạn có thể tuỳ chỉnh thuộc tính border, background,v.v... của riêng tiêu đề tab được chọn (chứ không phải tất cả). Riêng đối với thuộc tính color thì bạn cần thêm !important.
  
  Nội dung tab 1

  Nội dung tab 2

  
  
  
  
  
  
  

  CodeColon Select All Code

  [mystyle][div=|mytab5|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab5 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab5 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab5 .tabbertab]border: none;[/style]

[style=.mytab5 ul.tabbernav li.tabberactive a]color: blue !important; background: red; width: 500px;[/style]

[/div][/mystyle]

  CodeColon Select All Code

  [style=.mytab5 ul.tabbernav li.tabberactive a]color: blue !important; background: red; width: 500px;[/style]

• ul.tabbernav li.tabberactive a:hover: Là phiên bản của tiêu đề tab đang được chọn (li có class .tabberactive) khi hover chuột qua của ul.tabbernav li.tabberactive a. Bạn có thể tuỳ chỉnh thuộc tính border, width, height,v.v... (trừ color và background) của tiêu đề tab đang được chọn khi đang hover chuột qua. Riêng thuộc tính color và background thì cần thêm !important.
  
  Nội dung tab 1

  Nội dung tab 2

  
  
  
  
  
  
  

  CodeColon Select All Code

  [mystyle][div=|mytab6|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab6 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab6 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab6 .tabbertab]border: none;[/style]

[style=.mytab6 ul.tabbernav li.tabberactive a:hover]color: white !important; background: yellow !important; border: 1px solid red;[/style]

[/div][/mystyle]

  CodeColon Select All Code

  [style=.mytab6 ul.tabbernav li.tabberactive a:hover]color: white !important; background: yellow !important; border: 1px solid red;[/style]

  
  

Trang trí nội dung tab

Cứ .tabberlive .tabbertab mà quất thôi. Ví dụ:

Nội dung tab 1

Nội dung tab 2

CodeColon Select All Code

[mystyle][div=|mytab7|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab7 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab7 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab7 .tabbertab]border: none;[/style]

[style=.mytab7 .tabberlive .tabbertab]background: black; color: white;[/style]

[/div][/mystyle]

CodeColon Select All Code

[style=.mytab7 .tabberlive .tabbertab]background: black; color: white;[/style]


Tab dọc

Đối với những bạn không thích tuỳ chỉnh style tab, mà chỉ đơn thuần là muốn một cái tab dọc thì đây:

Nội dung tab 1

Nội dung tab 2

CodeColon Select All Code

[mystyle][div=|mytab8|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab8 ul.tabbernav]float: left; border-bottom: none; margin-right: 5px; padding: 0;[/style]
[style=.mytab8 ul.tabbernav li a]display: block;[/style]
[style=.mytab8 ul.tabbernav li:last-child a]border-bottom: 1px solid #778;[/style]
[style=.mytab8 .tabberlive .tabbertab]float: left; border-top: 1px solid #aaa;[/style]
[style=.mytab8 .tabberlive:after]display: block; content: '.'; clear: both; color: transparent; width: 0; height: 0;[/style]

[/div][/mystyle]

CodeColon Select All Code

[style=.mytab8 ul.tabbernav]float: left; border-bottom: none; margin-right: 5px; padding: 0;[/style]
[style=.mytab8 ul.tabbernav li a]display: block;[/style]
[style=.mytab8 ul.tabbernav li:last-child a]border-bottom: 1px solid #778;[/style]
[style=.mytab8 .tabberlive .tabbertab]float: left; border-top: 1px solid #aaa;[/style]
[style=.mytab8 .tabberlive:after]display: block; content: '.'; clear: both; color: transparent; width: 0; height: 0;[/style]


Còn đối với những bạn muốn tuỳ chỉnh style của tab dọc thì đây là bản "phá" CSS của tab dọc:

Nội dung tab 1

Nội dung tab 2

CodeColon Select All Code

[mystyle][div=|mytab9|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab9 ul.tabbernav]border-bottom: none; float: left;[/style]
[style=.mytab9 ul.tabbernav li a]border: none; background: none; display: block;[/style]
[style=.mytab9 .tabbertab]border: none; float: left;[/style]
[style=.mytab9 .tabberlive:after]display: block; content: '.'; clear: both; color: transparent; width: 0; height: 0;[/style]

[/div][/mystyle]

CodeColon Select All Code

[style=.mytab9 ul.tabbernav]border-bottom: none; float: left;[/style]
[style=.mytab9 ul.tabbernav li a]border: none; background: none; display: block;[/style]
[style=.mytab9 .tabbertab]border: none; float: left;[/style]
[style=.mytab9 .tabberlive:after]display: block; content: '.'; clear: both; color: transparent; width: 0; height: 0;[/style]


Tuỳ chỉnh một tab được chỉ định

Ờ rồi, giờ nếu bạn muốn background của Tab 1 là màu xanh còn background của Tab 2 là màu đỏ thì sao?

Nội dung tab 1

Nội dung tab 2

CodeColon Select All Code

[mystyle][div=|mytab10|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab10 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab10 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab10 .tabbertab]border: none;[/style]

[style=.mytab10 ul.tabbernav li:nth-child(1) a]background: red;[/style]
[style=.mytab10 ul.tabbernav li:nth-child(2) a]background: blue;[/style]

[/div][/mystyle]

CodeColon Select All Code

[style=.mytab10 ul.tabbernav li:nth-child(1) a]background: red;[/style]
[style=.mytab10 ul.tabbernav li:nth-child(2) a]background: blue;[/style]


Rồi giờ tui muốn Tab 1 khi được chọn có background là màu vàng còn Tab 2 khi được chọn có background là màu hồng thì sao?

Nội dung tab 1

Nội dung tab 2

CodeColon Select All Code

[mystyle][div=|mytab11|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab11 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab11 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab11 .tabbertab]border: none;[/style]

[style=.mytab11 ul.tabbernav li:nth-child(1).tabberactive a]background: yellow;[/style]
[style=.mytab11 ul.tabbernav li:nth-child(2).tabberactive a]background: pink;[/style]

[/div][/mystyle]

CodeColon Select All Code

[style=.mytab11 ul.tabbernav li:nth-child(1).tabberactive a]background: yellow;[/style]
[style=.mytab11 ul.tabbernav li:nth-child(2).tabberactive a]background: pink;[/style]


Rồi giờ chẳng hạn tui có 6 tab, tui muốn tab chẵn có màu xanh dương còn tab lẻ có màu đỏ thì sao?

Nội dung tab 1

Nội dung tab 2

Nội dung tab 3

Nội dung tab 4

Nội dung tab 5

Nội dung tab 6

CodeColon Select All Code

[mystyle][div=|mytab12|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[tab=Tab 3]Nội dung tab 3[/tab]

[tab=Tab 4]Nội dung tab 4[/tab]

[tab=Tab 5]Nội dung tab 5[/tab]

[tab=Tab 6]Nội dung tab 6[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab12 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab12 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab12 .tabbertab]border: none;[/style]

[style=.mytab12 ul.tabbernav li:nth-child(2n+1) a]background: red;[/style]
[style=.mytab12 ul.tabbernav li:nth-child(2n) a]background: blue;[/style]

[/div][/mystyle]

CodeColon Select All Code

[style=.mytab12 ul.tabbernav li:nth-child(2n+1) a]background: red;[/style]
[style=.mytab12 ul.tabbernav li:nth-child(2n) a]background: blue;[/style]


Các bạn tìm hiểu thêm về :nth-child ở đây. Bạn cũng có thể áp dụng điều tương tự với nội dung tab:

Nội dung tab 1

Nội dung tab 2

Nội dung tab 3

Nội dung tab 4

Nội dung tab 5

Nội dung tab 6

CodeColon Select All Code

[mystyle][div=|mytab13|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[tab=Tab 3]Nội dung tab 3[/tab]

[tab=Tab 4]Nội dung tab 4[/tab]

[tab=Tab 5]Nội dung tab 5[/tab]

[tab=Tab 6]Nội dung tab 6[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab13 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab13 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab13 .tabbertab]border: none;[/style]

[style=.mytab13 .tabberlive .tabbertab:nth-child(2n+1)]background: red;[/style]
[style=.mytab13 .tabberlive .tabbertab:nth-child(2n)]background: blue;[/style]

[/div][/mystyle]

CodeColon Select All Code

[style=.mytab13 .tabberlive .tabbertab:nth-child(2n+1)]background: red;[/style]
[style=.mytab13 .tabberlive .tabbertab:nth-child(2n)]background: blue;[/style]


Template tổng hợp để tuỳ chỉnh tab

Đối với tab ngang:

Nội dung tab 1

Nội dung tab 2

CodeColon Select All Code

[mystyle][div=|mytab1|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab1 ul.tabbernav]border-bottom: none;[/style]
[style=.mytab1 ul.tabbernav li a]border: none; background: none; display: inline-block;[/style]
[style=.mytab1 .tabbertab]border: none;[/style]

[style=.mytab1 ul.tabbernav li a]...[/style]
[style=.mytab1 ul.tabbernav li:nth-child(1) a]...[/style]

[style=.mytab1 ul.tabbernav li a:hover]...[/style]
[style=.mytab1 ul.tabbernav li:nth-child(1) a:hover]...[/style]

[style=.mytab1 ul.tabbernav li.tabberactive a]...[/style]
[style=.mytab1 ul.tabbernav li:nth-child(1).tabberactive a]...[/style]

[style=.mytab1 ul.tabbernav li.tabberactive a:hover]...[/style]
[style=.mytab1 ul.tabbernav li:nth-child(1).tabberactive a:hover]...[/style]

[style=.mytab1 .tabberlive .tabbertab]...[/style]
[style=.mytab1 .tabberlive .tabbertab:nth-child(1)]...[/style]

[/div][/mystyle]


Đối với tab dọc:

Nội dung tab 1

Nội dung tab 2

CodeColon Select All Code

[mystyle][div=|mytab9|][tabs]

[tab=Tab 1]Nội dung tab 1[/tab]

[tab=Tab 2]Nội dung tab 2[/tab]

[/tabs][/div][div=||display: none;]

[style=.mytab9 ul.tabbernav]border-bottom: none; float: left;[/style]
[style=.mytab9 ul.tabbernav li a]border: none; background: none; display: block;[/style]
[style=.mytab9 .tabbertab]border: none; float: left;[/style]
[style=.mytab9 .tabberlive:after]display: block; content: '.'; clear: both; color: transparent; width: 0; height: 0;[/style]

[style=.mytab9 ul.tabbernav li a]...[/style]
[style=.mytab9 ul.tabbernav li:nth-child(1) a]...[/style]

[style=.mytab9 ul.tabbernav li a:hover]...[/style]
[style=.mytab9 ul.tabbernav li:nth-child(1) a:hover]...[/style]

[style=.mytab9 ul.tabbernav li.tabberactive a]...[/style]
[style=.mytab9 ul.tabbernav li:nth-child(1).tabberactive a]...[/style]

[style=.mytab9 ul.tabbernav li.tabberactive a:hover]...[/style]
[style=.mytab9 ul.tabbernav li:nth-child(1).tabberactive a:hover]...[/style]

[style=.mytab9 .tabberlive .tabbertab]...[/style]
[style=.mytab9 .tabberlive .tabbertab:nth-child(1)]...[/style]

[/div][/mystyle]

Chúc các bạn tuỳ chỉnh tab vui vẻ!

BBCode by Tendou.