Trước đây, các bạn thường phải dùng javascript để tạo ra các tab nội dung. Điều đó làm ảnh hưởng đến tốc độ load trang web của bạn. Vì vậy hôm nay mình sẽ giới thiệu cho các bạn tab nội dung được làm hoàn toàn bằng css.

Trước đây, các bạn thường phải dùng javascript để tạo ra các tab nội dung. Điều đó làm ảnh hưởng đến tốc độ load trang web của bạn. Vì vậy hôm nay mình sẽ giới thiệu cho các bạn tab nội dung được làm hoàn toàn bằng css.


Các bước thực hiện

Bước 1: Chèn CSS vào dưới thẻ <style> trong HTML blog:
.ease { -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .tabcss { width: 100%; max-width: 1000px; margin: 0 auto; } .tabs { background: #fff; position: relative; } .tabs > input, .tabs > span { width: 20%; height: 60px; line-height: 60px; position: absolute; top: 0; } .tabs > input { cursor: pointer; filter: alpha(opacity=0); opacity: 0; position: absolute; z-index: 99; } .tabs > span { background: #f0f0f0; text-align: center; overflow: hidden; } .tabs > span i, .tabs > span { -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .tabs > input:hover + span { background: rgba(255,255,255,.1); } .tabs > input:checked + span { background: #fff; } .tabs > input:check + span{border:1px solid #000} .tabs > input:checked + span, .tabs > input:hover + span { color: #3498DB; } #tab-1, #tab-1 + span { left: 0; } #tab-2, #tab-2 + span { left: 20%; } #tab-3, #tab-3 + span { left: 40%; } #tab-4, #tab-4 + span { left: 60%; } #tab-5, #tab-5 + span { left: 80%; } .tab-content { padding: 80px 20px 20px; width: 100%; min-height: 340px; } .tab-content section { width: 100%; display: none; } .tab-content section h1 { margin-top: 15px; font-size: 100px; font-weight: 100; text-align: center; } #tab-1:checked ~ .tab-content #tab-item-1 { display: block; } #tab-2:checked ~ .tab-content #tab-item-2 { display: block; } #tab-3:checked ~ .tab-content #tab-item-3 { display: block; } #tab-4:checked ~ .tab-content #tab-item-4 { display: block; } #tab-5:checked ~ .tab-content #tab-item-5 { display: block; } .effect .line{ background: #3498DB; width: 20%; height: 4px; position: absolute; top: 56px; } #tab-1:checked ~ .line { left: 0; } #tab-2:checked ~ .line { left: 20%; } #tab-3:checked ~ .line { left: 40%; } #tab-4:checked ~ .line { left: 60%; } #tab-5:checked ~ .line { left: 80%; }

Bước 2: Chèn code sau vào nơi muốn hiển thị:
<div style='width:500px;height:300px;margin:10px auto;max-width:90%'> <div class='tabcss'> <div class='tabs effect'> <!-- tab-title --> <input checked='checked' id='tab-1' name='tab' type='radio'/> <span href='#tab-item-1'>Tab 1</span> <input id='tab-2' name='tab' type='radio'/> <span href='#tab-item-2'>Tab 2</span> <input id='tab-3' name='tab' type='radio'/> <span href='#tab-item-3'>Tab 3</span> <input id='tab-4' name='tab' type='radio'/> <span href='#tab-item-4'>Tab 4</span> <input id='tab-5' name='tab' type='radio'/> <span href='#tab-item-5'>Tab 5</span> <div class='line ease'/> <!-- tab-content --> <div class='tab-content'> <section id='tab-item-1'> <h1>One</h1> </section> <section id='tab-item-2'> <h1>Two</h1> </section> <section id='tab-item-3'> <h1>Three</h1> </section> <section id='tab-item-4'> <h1>Four</h1> </section> <section id='tab-item-5'> <h1>Five</h1> </section> </div> </div> </div> </div>

Nhớ chỉnh sửa cho phù hợp nhé


Chúc các bạn thành công!

Tags