MENUS
IMAGES
BUTTONS
FORMS
FILTERS
TABLES
MORE
WEBSITE
GRID
GOOGLE MAP
CONVERTERS
HOW TO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Hướng dẫn tạo tabs bằng HTML, CSS và Javascript

HIển thị nội dung theo các tabs là một trong những kỹ thuật rất hiệu quả khi trang web của bạn có chứa nhiều nội dung ở các thể loại khác nhau, nó cũng rất hữu dụng ngay cả trang của bạn là một trang bán hàng. Việc sử dụng các tabs nội dung sẽ khiến trang web của bạn chuyên nghiệp và thân thiện hơn với người dùng, ta sẽ chỉ hiển thị nội dung mà người dùng quan tâm đến.

Trong bài viết này, mình sẽ cùng các bạn xây dựng chức năng hiện thị nội dung theo tabs với HTML, CSS và Javascript. Các bạn hãy xem ví dụ dưới đây:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

huong dan tao tabs bang html css va javascript jpg

1. Xây dựng giao diện

Đầu tiên là bước xây dựng giao diện hiển thị, các bạn tạo file index.html và tạo các tab và các thẻ chứa nội dung với đoạn mã sau:

Code RUN
<div class="tab">
  <button class="tablinks active">PHP</button>
  <button class="tablinks">HTML</button>
  <button class="tablinks">CSS</button>
</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>

Rất đơn giản phải không nào, giờ mình sẽ định dạng để nó dễ nhìn hơn nhé! Các bạn dán đoạn code sau vào bên trong thẻ style:

Code RUN
div.container {
    width: 60%;  
    margin: auto;  
}
/* định dạng thẻ div chưa các button tab */
div.tab {
    overflow: hidden; 
    border: 1px solid #ccc; 
    background-color: #f1f1f1; 
}

/* định dạng các button tab */
div.tab button {
    background-color: inherit; 
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* đổi màu khi một button tab được hover */
div.tab button:hover {
    background-color: #ddd;
}

/* đổi màu nền cho tab đang được hiển thị nội dung */
div.tab button.active {
    background-color: #ccc;
}

/* định dạng nội dung hiển thị */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

Tất cả các định dạng đều khá đơn giản, các bạn chỉ cần lưu ý đến phần thuộc tính display: none của các tab nội dung, ban đầu chúng sẽ được ẩn đi và sẽ được hiển thị khi button tương ứng được click.

Vậy là đã xong phần giao diện rồi, chúng ta tiếp tục xây dựng phần xử lí Javascript để hiển thị nội dung phù hợp nhé.

2. Xử lí thao tác người dùng bằng javascript

Các bạn đặt đoạn script này sau thẻ body nhé:

Code RUN
<script type="text/javascript">
    var buttons = document.getElementsByClassName('tablinks');
    var contents = document.getElementsByClassName('tabcontent');
    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';
    }
    for (var i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener("click", function(){
            var id = this.textContent;
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].classList.remove("active");
            }
            this.className += " active";
            showContent(id);
        });
    }
    showContent('PHP');
</script>

Đầu tiên mình sẽ lấy tất cả các button và các thẻ div hiện thị nội dung dựa vào class.

Tiếp đến mình sẽ khai báo hàm showContent để hiển thị thể div chưa nội dung dựa vào id được truyền vào, trong hàm này trước hết mình ẩn hết tất cả các thẻ div chứa nội dung, sau đó chỉ hiện thị thẻ chưa nội dung có id được truyền vào hàm.

Sau khi đã có hàm showContent mình tiếp tục gán sự kiện onclick cho tất cả các buttons đã lấy ở trên, button nào được click sẽ được thêm class="active" và gọi hàm showContent với id là nội dung của button đó.

Cuối cùng mình gọi hàm showContent với id là PHP để mặc định hiển thị tab PHP.

3. Lời kết

Vậy là mình đã cùng các bạn xây dựng xong chức năng hiển thị nội dung theo tab với HTML, CSS và Javascript, Hẹn gặp lại các bạn trong cá bài viết sau.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top