Hướng dẫn tạo tabs bằng HTML, CSS và Javascript - demo RUN
​x
 
1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="utf-8">
5
    </head>
6
    <style type="text/css">
7
        div.container {
8
            width: 60%;
9
            margin: auto;
10
        }
11
        /* định dạng thẻ div chưa các button tab */
12
        div.tab {
13
            overflow: hidden;
14
            border: 1px solid #ccc;
15
            background-color: #f1f1f1;
16
        }
17
​
18
        /* định dạng các button tab */
19
        div.tab button {
20
            background-color: inherit;
21
            float: left;
22
            border: none;
23
            outline: none;
24
            cursor: pointer;
25
            padding: 14px 16px;
26
            transition: 0.3s;
27
            font-size: 17px;
28
        }
29
​
30
        /* đổi màu khi một button tab được hover */
31
        div.tab button:hover {
32
            background-color: #ddd;
33
        }
34
​
35
        /* đổi màu nền cho tab đang được hiển thị nội dung */
36
        div.tab button.active {
37
            background-color: #ccc;
38
        }
39
​
40
        /* định dạng nội dung hiển thị */
41
        .tabcontent {
42
            display: none;
43
            padding: 6px 12px;
44
            border: 1px solid #ccc;
45
            border-top: none;
46
        }
47
    </style>
48
    <body>
49
        <div class="container">
50
            <h4>Click vào các tab để hiển thị nội dung</h4>
51
            <div class="tab">
52
              <button class="tablinks active">PHP</button>
53
              <button class="tablinks">HTML</button>
54
              <button class="tablinks">CSS</button>
55
            </div>
56
​
57
            <div id="PHP" class="tabcontent">
58
                <h3>PHP</h3>
59
                <p>
60
                    PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là một ngôn ngữ lập
61
                    trình kịch bản hay một loại mã lệnh chủ yếu được dùng để phát triển các ứng
62
                    dụng viết cho máy chủ, mã nguồn mở, dùng cho mục đích tổng quát. Nó rất
63
                    thích hợp với web và có thể dễ dàng nhúng vào trang HTML..
64
                </p>
65
            </div>
66
​
67
            <div id="HTML" class="tabcontent">
68
                <h3>HTML</h3>
69
                <p>
70
                    HTML là chữ viết tắt của cụm từ HyperText Markup Language((Xem thêm tại
71
                    http://vi.wikipedia.org/wiki/HTML)) (dịch là Ngôn ngữ đánh dấu siêu văn bản)
72
                    được sử dụng để tạo một trang web, trên một website có thể sẽ chứa nhiều trang
73
                    và mỗi trang được quy ra là một tài liệu HTML.
74
                </p>
75
            </div>
76
​
77
            <div id="CSS" class="tabcontent">
78
                <h3>CSS</h3>
79
                <p>
80
                    CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để
81
                    tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (ví dụ như HTML).
82
                </p>
83
            </div>
84
        </div>
85
    </body>
86
    <script type="text/javascript">
87
        var buttons = document.getElementsByClassName('tablinks');
88
        var contents = document.getElementsByClassName('tabcontent');
89
        function showContent(id){
90
            for (var i = 0; i < contents.length; i++) {
91
                contents[i].style.display = 'none';
92
            }
93
            var content = document.getElementById(id);
94
            content.style.display = 'block';
95
        }
96
        for (var i = 0; i < buttons.length; i++) {
97
            buttons[i].addEventListener("click", function(){
98
                var id = this.textContent;
99
                for (var i = 0; i < buttons.length; i++) {
100
                    buttons[i].classList.remove("active");
101
                }
102
                this.className += " active";
103
                showContent(id);
104
            });
105
        }
106
        showContent('PHP');
107
    </script>
108
</html>
PHÓNG TO