Live Code Editor Version 2.0

Hướng dẫn tạo Vertical Tabs với HTML, CSS và Javascript - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            * {
                box-sizing: border-box;
            }
            body {
                font-family: "Times New Roman", sans-serif;
            }
            .container {
                width: 500px;
                margin: auto;
            }
            /* Định dạng phần tab */
            div.tab {
                float: left;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
                width: 30%;
                height: 300px;
            }
             
            /* định dạng các thẻ a dại diện cho từng tab */
            div.tab a {
                display: block;
                background-color: inherit;
                color: black;
                padding: 22px 16px;
                width: 100%;
                border: none;
                outline: none;
                text-align: left;
                cursor: pointer;
                transition: 0.3s;
                font-size: 17px;
            }
             
            /* Đổi màu khi tab được hover */
            div.tab a:hover {
                background-color: #ddd;
            }
             
            /* Đổi màu khi tab được active */
            div.tab a.active {
                background-color: #ccc;
            }
             
            /* Định dạng cho phần nội dung */
            .tabcontent {
                float: left;
                padding: 0px 12px;
                border: 1px solid #ccc;
                width: 70%;
                border-left: none;
                height: 300px;
            }
        </style>
    </head>
    <body> 
        <div class="container">
            <h2>Freetuts.net hướng dẫn tạo Vertical Tabs</h2>
            <div class="tab">
                <a class="tablinks active">PHP</a>
                <a class="tablinks">HTML</a>
                <a class="tablinks">CSS</a>
            </div>
              
            <div id="PHP" class="tabcontent">
                <h3>PHP</h3>
                <p>
                    PHP (viết tắt hồi quy "PHP: Hypertext Preprocessor") là một ngôn ngữ lập 
                    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
                    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
                    thích hợp với web và có thể dễ dàng nhúng vào trang HTML..
                </p>
            </div>
              
            <div id="HTML" class="tabcontent">
                <h3>HTML</h3>
                <p>
                    HTML là chữ viết tắt của cụm từ HyperText Markup Language((Xem thêm tại 
                    http://vi.wikipedia.org/wiki/HTML)) (dịch là Ngôn ngữ đánh dấu siêu văn bản)
                    được sử dụng để tạo một trang web, trên một website có thể sẽ chứa nhiều trang
                    và mỗi trang được quy ra là một tài liệu HTML.
                </p> 
            </div>
              
            <div id="CSS" class="tabcontent">
                <h3>CSS</h3>
                <p>
                    CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để
                    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).
                </p>
            </div>
        </div>     
    </body>
    <script type="text/javascript">
        //lấy các thẻ a đại diện cho các tab
        var buttons = document.getElementsByClassName('tablinks');
        //lấy các phần nội dung
        var contents = document.getElementsByClassName('tabcontent');
        //Định nghĩa hàm hiển thị nội dung theo id
        function showContent(id){
            for (var i = 0; i < contents.length; i++) {
                contents[i].style.display = 'none';
            }
            var content = document.getElementById(id);
            content.style.display = 'block';
        }
        //lặp qua các tab và gán sự kiện click
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].addEventListener("click", function(){
                //lấy văn bản trong thẻ a đại diện cho id của nội dung
                var id = this.textContent;
                //bỏ active tất cả các tab
                for (var i = 0; i < buttons.length; i++) {
                    buttons[i].classList.remove("active");
                }
                //active tab được click
                this.className += " active";
                //show nội dung theo id lấy được
                showContent(id);
            });
        }
        //mặc định hiển thị tab PHP
        showContent('PHP');
    </script>
</html>