Hướng dẫn css folder tabs - tab thư mục css
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. Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.freetuts.net, không được copy dưới mọi hình thức. Có thể bạn quan tâmTrong 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: 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:
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: Bài viết này được đăng tại [free tuts .net] 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 javascriptCác bạn đặt đoạn script này sau thẻ body nhé: Đầ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 Sau khi đã có hàm Cuối cùng mình gọi hàm 3. Lời kếtVậ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. |
Bài Viết Liên Quan
Hướng dẫn can we have 2 keys in dictionary python? - chúng ta có thể có 2 khóa trong từ điển python không?
Trong hướng dẫn Python này, chúng tôi sẽ thảo luận về nhiều khóa từ điển Python. Ở đây chúng tôi cũng sẽ bao gồm các ví dụ dưới đây:Python dictionary ...
Hướng dẫn is macbook pro m1 good for python programming? - macbook pro m1 có tốt cho lập trình python không?
Tôi đã tìm ra một giải pháp giải pháp - Cách cài đặt Numpy trên M1 Max, với hiệu suất tăng tốc nhất (Apples Veclib)? Đây là câu trả lời kể từ ngày 6 tháng ...
Hướng dẫn is javascript a glue language? - javascript có phải là ngôn ngữ keo không?
Ngôn ngữ keo được sử dụng ở khắp mọi nơi. Mặc dù bạn có thể xác định là Pythonista, hoặc Lua Fiend, hoặc một nhà phát triển C ++, tất cả chúng ta cuối ...
Hướng dẫn python typing none - python gõ không có
Trong Python, không có vô giá trị từ khóa, nhưng có Không có. Không có giá trị trả về của hàm doesn’t return anything. None is often used to represent the absence of a ...
Hướng dẫn python removesuffix - python removeuffix
Xem thảo luậnCải thiện bài viếtLưu bài viếtĐọcBàn luậnXem thảo luậnCải thiện bài viếtLưu bài viếtĐọcstr.removesuffix(suffix, /) function removes the suffix ...
Chụp màn hình samsung j6 2023
. Camera kép chụp ảnh xóa phông theo xu thế. Thiết kế của Samsung Galaxy J6 có tạo được ấn tượng?. Camera đủ mạnh, dễ dàng sử dụng. Những lý do bạn nên ...
Hướng dẫn web scraping load more button python - web cạo tải thêm nút python
from selenium import webdriver import time driver = ...
Hướng dẫn deletion distance python - xóa khoảng cách python
Tôi đã giải quyết vấn đề này tại Pramp và tôi gặp khó khăn trong việc tìm ra thuật toán cho vấn đề này.Nội phân Chính showShowMã ví dụLàm thế nào để ...
Hướng dẫn can we use return in if statement python? - chúng ta có thể sử dụng lệnh return trong if python không?
Giả sử tôi có một tuyên bố if với if(A > B): return A+1 else: return A-1 0. Từ góc độ hiệu quả, tôi nên sử dụngif(A > B): return A+1 return A-1 hoặcif(A > ...
Hướng dẫn what is late static binding in php for? - liên kết tĩnh trễ trong php để làm gì?
Chính xác thì các ràng buộc tĩnh muộn trong PHP là gì? Mark Amery133K78 Huy hiệu vàng395 Huy hiệu bạc444 Huy hiệu đồng78 gold badges395 silver badges444 bronze badges Đã ...
Hướng dẫn how to fetch data from database in php using mysqli - làm thế nào để tìm nạp dữ liệu từ cơ sở dữ liệu trong php bằng cách sử dụng mysqli
❮ Php mysqli tham khảoVí dụ - Phong cách định hướng đối tượngTìm nạp các hàng từ một kết quả đã đặt:?> Nhìn vào ví dụ về phong cách thủ tục ở phía ...
Hướng dẫn input two numbers and display the largest number in python - nhập hai số và hiển thị số lớn nhất trong python
Chương trình Python để tìm thấy lớn nhất trong số hai sốChúng tôi có nhiều cách tiếp cận để có được con số lớn nhất trong số hai số, và ở đây chúng ...
Xe máy lấn tuyến phạt bao nhiêu tiền 2023
Trả lời: Vụ Pháp chế - Bộ GTVT trả lời như sau: Theo quy định tại Điều 24 Nghị định số 34/2010/NĐ-CP ngày 02/4/2010 của Chính phủ quy định xử phạt vi ...
Hướng dẫn node js change html content - nút js thay đổi nội dung html
Bạn không thể sửa đổi từ phía nút theo cách mà tôi nghĩ rằng bạn đang cố gắng làm. Bạn có thể gửi lại phản hồi cho phía máy khách và trên phản hồi ...
Hướng dẫn dùng numeral definition python - sử dụng python định nghĩa số
Kiểu dữ liệu Number trong Python lưu trữ các giá trị số. Chúng là các kiểu dữ liệu immutable, hay là kiểu dữ liệu không thay đổi, nghĩa là các thay đổi về ...
Hướng dẫn php mysqli export to csv - php mysqli xuất sang csv
Tôi đã cố gắng trong nhiều ngày để xuất từ một truy vấn một số giá trị trong .csv với mysqli, nhưng tôi có vấn đề khi xuất, mọi thứ đang xuất ...
Hướng dẫn can you have logic in css? - bạn có thể có logic trong css?
Gói lênCSS rất có khả năng làm thay đổi các hệ thống bố trí thông minh và phản ứng. Các cấu trúc và thuật toán kiểm soát của nó có thể hơi kỳ lạ so ...
Hướng dẫn how check string is english or not in php? - làm thế nào để kiểm tra chuỗi là tiếng anh hay không trong php?
Trong JS tôi đã sử dụng mã này:if(string.match(/[^A-Za-z0-9]+/)) Nhưng tôi không biết, làm thế nào để làm điều đó trong PHP. Benmorel32,8K48 Huy hiệu vàng173 Huy hiệu ...
Hướng dẫn dùng ord meaning python
Nội dung chínhNội dung chính ShowSắp xếp dictionary python theo thứ tự tăng dần | hàm sorted()Sắp xếp theo key | phương thức keys()Sắp xếp theo value | phương thức ...
Hướng dẫn date of birth validation in php - xác thực ngày sinh trong php
Demo: Ví dụ làm việc.Php ngày của tập lệnh xác minh sinhĐịnh dạng ngày xác thựcKiểm tra giới hạn tuổi bằng cách so sánh ngàyTính toán tuổi của bạnKiểm ...