Để tạo tab cho website có rất nhiều cách bạn có thể lên google search ra cả mớ, bài viết này hướng dẫn cách tạo tab đơn giản nhất.
Trước hết hãy nhìn vào các tab html:
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul> <li><a href="javascript:hwpSwitchTab('tb_1', 'content_1');" id="tb_1" class="tabmenu active">Tab 1</a></li> <li><a href="javascript:hwpSwitchTab('tb_2', 'content_2');" id="tb_2" class="tabmenu">Tab 2</a></li> </ul> <div id="content_1" class="tabcontent"> Content of the first tab. </div> <div id="content_2" class="tabcontent" style="display:none;"> Content of the second tab. </div> |
Tiếp theo là js để thực thi bạn ném đoạn mã này vào file js để chạy:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function hwpSwitchTab(hwp_tab_id, hwp_tab_content) { // first of all we get all tab content blocks (I think the best way to get them by class names) var x = document.getElementsByClassName("tabcontent"); var i; for (i = 0; i < x.length; i++) { x[i].style.display = 'none'; // hide all tab content } document.getElementById(hwp_tab_content).style.display = 'block'; // display the content of the tab we need // now we get all tab menu items by class names (use the next code only if you need to highlight current tab) var x = document.getElementsByClassName("tabmenu"); var i; for (i = 0; i < x.length; i++) { x[i].className = 'tabmenu'; } document.getElementById(hwp_tab_id).className = 'tabmenu active'; } |
Muốn đẹp hơn thì a/e style lại tí cho đẹp là chơi được rồi! Chúc ae thành công
