Hướng dẫn tạo tabs cho website đơn giản bằng HTML, CSS, JavaScript
Notice: A non well formed numeric value encountered in /home/phantha1/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118
Notice: A non well formed numeric value encountered in /home/phantha1/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119
Notice: A non well formed numeric value encountered in /home/phantha1/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118
Notice: A non well formed numeric value encountered in /home/phantha1/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119
Notice: A non well formed numeric value encountered in /home/phantha1/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118
Notice: A non well formed numeric value encountered in /home/phantha1/public_html/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119
Tab là một form khá phổ biến và quen thuộc với nhiều website. Vậy họ đã tạo ra những kiểu tab đó bằng cách nào? Hôm nay, mình sẽ hướng dẫn cho các bạn cách đơn giản để tạo ra tabs với HTML, CSS và JavaScript.
Để làm được bạn phải biết sơ qua về HTMl, CSS, và JS (javascript).
Bước 1: Tạo giao diện cho tabs bằng HTML và CSS:
Đầu tiên là code HTML. Gồm có 2 layout chính đó là layout cho tab (class: tab-menu) và layout cho nội dung tab (class: content-tab).
Chèn code HTML này trong thẻ <body>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <div class="tab-menu"> <a class="tab active" id="tabA" onclick="ShowTab('tabA','contentA')">Title A</a> <a class="tab" id="tabB" onclick="ShowTab('tabB', 'contentB')">Title B</a> <a class="tab" id="tabC" onclick="ShowTab('tabC','contentC')">Title C</a> </div> <div class="content-tab"> <div class="content-tab-item active-tab" id="contentA"> <h2>Content TabA</h2> </div> <div class="content-tab-item" id="contentB"> <h2>Content TabB</h2> </div> <div class="content-tab-item" id="contentC"> <h2>Content TabB</h2> </div> </div> |
Giờ thì style lại cho nó đẹp tí. Chèn code CSS sau vào <head>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<span style="font-family: 'trebuchet ms' , sans-serif;">* { font-family: 'Roboto', sans-serif; } .tab-menu { margin-top: 20px; } .tab { padding: 10px 20px; background: #304FFE; color: #fff; cursor: pointer; box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12); } .tab+.tab { margin-left: 10px; } .active { opacity: 0.5; } .content-tab-item { display: none; } .active-tab { display: inline-block; }</span> |
Kết quả sẽ được như sau:
Bước 2: Đây là bước quan trọng nhất, đó là viết JS xử lý sự kiện click cho các tab:
Chèn đoạn code JS sau vào thẻ <head> nhớ đặt nó trong thử <script>:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<span style="font-family: 'trebuchet ms' , sans-serif;"> var tabs = document.getElementsByClassName("tab");//Lấy địa chỉ class của tab var contents = document.getElementsByClassName("content-tab-item"); //Lấy địa chỉ class phần nội dung //Hàm xử lý sự kiện click cho tab</span> function ShowTab(tab, content){ var i; var tabs = document.getElementsByClassName("tab"); var contents = document.getElementsByClassName("content-tab-item"); var tabclick = document.getElementById(tab); var contentsclick = document.getElementById(content); for(i = 0; i < tabs.length; i++){ tabs[i].classList.remove("active");//xoá thuộc tính active của tab contents[i].classList.remove("active-tab");//xoá thuộc tính active của content } tabclick.classList.add("active"); //gán thuộc tính active cho tab được chọn contentsclick.classList.add("active-tab");// gán thuộc tính active-tab cho content của tab đc chọn } |
Và đây là kết quả:
Để lại bình luận