Tab css

Nếu bạn là một nhà thiết kế web bắt đầu, một trong nhiều điều bạn sẽ phải hiểu sớm là khoảng cách không trắng trong mã của trang web được xử lý bởi trình duyệt web

Thật không may, cách mà các trình duyệt xử lý không gian trắng không trực tiếp quan trọng, đặc biệt nếu bạn vào HTML và so sánh nó với cách xử lý không gian trắng trong các chương trình xử lý văn bản, bạn có thể quen với

Trong phần mềm xử lý văn bản, bạn có thể thêm nhiều khoảng trống hoặc tab trong tài liệu và khoảng cách đó sẽ được phản ánh trong nội dung hiển thị của tài liệu. Đây không phải là trường hợp với HTML hoặc với các trang web. Như vậy, việc học cách không gian trắng thực sự được xử lý bởi trình duyệt web là rất quan trọng

Khoảng cách trong in

Trong phần mềm xử lý văn bản, ba ký tự trắng chính là khoảng trống, tab và dấu xuống dòng. Mỗi hành động này theo một cách riêng biệt, nhưng trong HTML, các trình duyệt hiển thị tất cả về các cơ sở giống nhau. Cho dù bạn đặt một dấu cách hay 100 dấu cách trong đánh dấu HTML hay trộn khoảng trắng với các tab và dấu xuống dòng, tất cả các dấu cách này sẽ được cô đặc biệt xuống một khoảng trống khi trang được hiển thị bởi trình duyệt. Trong thuật ngữ thiết kế web, điều này được gọi là sự sụp đổ không gian màu trắng. Bạn không thể sử dụng các phím trong khoảng trống điển hình này để bổ sung khoảng trống trong trang web vì trình duyệt thu hút nhiều không gian chỉ vào một khoảng trống khi được hiển thị trong trình duyệt,

Tại sao ai đó sử dụng tab đó?

Thông thường, khi mọi người sử dụng các tab trong tài liệu văn bản, họ đang sử dụng chúng vì lý do bố trí cục bộ hoặc để văn bản di chuyển đến một điểm định vị nhất hoặc là một khoảng cách nhất định từ một phần tử khác. Trong thiết kế web, bạn không thể sử dụng các ký tự khoảng trống nói trên để đạt được các kiểu trực quan hoặc nhu cầu bố cục cục bộ đó

Trong thiết kế web, việc sử dụng các ký tự khoảng trắng thừa trong mã sẽ hoàn toàn dễ đọc mã đó. Các nhà thiết kế và nhà phát triển web thường sử dụng các tab để thụt lề mã để họ có thể thấy các phần tử nào là con của các phần tử khác - nhưng các phần tử thụt lề đó không ảnh hưởng đến bố cục trực quan của trang. . Đối với những thay đổi bố cục cục bộ cần thiết, bạn cần phải chuyển sang CSS (bảng định kiểu xếp tầng)

Sử dụng CSS để tạo các tab và khoảng cách HTML

Các trang web ngày nay được xây dựng với sự phân tách về cấu trúc và phong cách. Cấu trúc của một trang được xử lý bởi HTML trong khi kiểu được quyết định bởi CSS. Điều này có nghĩa là để tạo khoảng cách hoặc đạt được một bố cục cục bộ nhất định, bạn nên chuyển sang CSS và không cố gắng thêm các ký tự khoảng trắng vào mã HTML

Nếu bạn đang cố gắng sử dụng các tab để tạo cột văn bản, thay vào đó bạn có thể sử dụng các phần tử

are ĐỊNH vị trí bằng CSS để có một cột cục bộ được định vị. Vị trí này có thể được thực hiện thông qua CSS nổi, vị trí tuyệt đối và tương đối hoặc các kỹ thuật bố trí CSS cục bộ mới hơn như Flexbox hoặc CSS Grid

Nếu dữ liệu bạn đang đặt là bảng định dạng dữ liệu, bạn có thể sử dụng các bảng này để căn chỉnh dữ liệu đó theo ý muốn. Các bảng thường có một đoạn rap bị hỏng trong thiết kế web vì chúng được sử dụng như các công cụ bố cục cục bộ thuần túy trong nhiều năm, nhưng các bảng vẫn hoàn toàn hợp lệ nếu nội dung của bạn chứa dữ liệu bảng nói trên

Lề, Pad và Văn bản thụt lề

Cách phổ biến nhất để tạo khoảng cách với CSS đang sử dụng một trong các kiểu CSS sau

• lề
• đệm
• thụt lề văn bản

Ví dụ, bạn có thể thụt lề dòng đầu tiên của một đoạn như một tab với CSS sau đây (lưu ý rằng điều này giả định rằng đoạn của bạn có một lớp thuộc tính là "đầu tiên" gắn liền với nó)

p. đầu tiên {
văn bản thụt lề. 5em;
}

Đoạn này bây giờ sẽ được nhận vào khoảng 5 ký tự

Bạn có thể sử dụng thuộc tính lề hoặc đệm trong CSS để thêm khoảng cách vào trên cùng, dưới cùng, bên trái hoặc bên phải (hoặc kết hợp các bên cạnh đó) của một phần tử. Cuối cùng, bạn có thể đạt được bất kỳ loại khoảng cách nào cần thiết bằng cách chuyển sang CSS

Di chuyển văn bản nhiều hơn một không gian không có CSS

Nếu tất cả những gì bạn muốn là để văn bản của bạn được di chuyển nhiều hơn một khoảng cách so với mục trước, bạn có thể sử dụng không gian không phá vỡ

Để sử dụng không gian không phá vỡ, bạn chỉ cần thêm 

Ví dụ, nếu bạn muốn chuyển từ năm không gian hơn của bạn, bạn có thể thêm sau đây trước từ

HTML tôn trọng những điều này và sẽ không thu gọn chúng xuống một không gian duy nhất. Tuy nhiên, đây được coi là một hành động rất nghèo vì nó được thêm dấu HTML vào một tài liệu chỉ để đạt được như ý kiến ​​bố trí. Việc tách rời cấu trúc và kiểu dáng đó, bạn nên tránh thêm các khoảng trống không phá vỡ đơn giản để đạt được hiệu ứng bố trí mong muốn và nên sử dụng CSS bên cạnh và bộ đệm thay thế

Hôm nay ATP Web sẽ hướng dẫn cách tạo thẻ Tab trong HTML đơn giản 2022 công cụ rất phổ biến hiện nay trong các Trang web

Hướng dẫn cách tạo thẻ Tab trong HTML đơn giản

Tưởng tượng xây dựng

Thì các tab này nó sinh ra vận dụng để hiển thị các thể loại khác nhau theo từng tab khác nhau nha. Chúng ta sử dụng html, css để tạo bố cục và ứng dụng JS để hiểu các tab chuyển ứng dụng

VD như Web linh kiện điện tử 3M trong phần hàng hóa nổi bật nó cũng chia ra làm ba tab khác nha

Mã HTML

Trước tiên các bạn cần phải mã cho mình một bộ khung nên có để tạo các tab cho nó. Trong các tab có hai phần chính là liên kết tab và nội dung tab

<. – Liên kết tab –>

Tất cả sản phẩm
Vi điều khiển – Nhúng
Ứng dụng mô-đun

<. – Nội dung tab –>

Hướng dẫn cách tạo thẻ Tab trong HTML đơn giản

Mã CSS

Để tab chúng ta dễ nhìn hơn, bố cục đẹp mắt hơn thì chúng ta cần phải css cho nó. Trong phần CSS này mình không nói nhiều cho lắm bởi vì đây hoàn toàn là các kiến ​​thức cơ bản

Trong này các bạn css cho mình hai. active that is. liên kết tab. active and. nội dung tab. active one is used to display color nền, color chữ còn lại used to display information of tab which them ta add class into

/* Liên kết tab */
tab{
trưng bày. uốn cong;
}
liên kết tab {
biên giới. không ai;
đề cương. không ai;
con trỏ. con trỏ;
bề rộng. 100%;
đệm. 1rem;
cỡ chữ. 13px;
chuyển đổi văn bản. chữ hoa;
trọng lượng phông chữ. 600;
chuyển tiếp. 0. dễ dàng 2 giây;
}
liên kết tab. bay lượn{
lai lịch. màu xanh da trời;
màu. #ffff;
}
/* Tab đang hoạt động */
liên kết tab. tích cực {
lai lịch. màu xanh da trời;
màu. #ffff;
}

/* nội dung tab */
nội dung tab {
trưng bày. không ai;
}
/* Chữ*/
tabcontent p {
màu. #333;
cỡ chữ. 16px;
}
/* nội dung tab đang hoạt động */
nội dung tab. tích cực {
trưng bày. khối;
}

Hướng dẫn cách tạo thẻ Tab trong HTML đơn giản

Mã Javascript

Đây chính là phần khác quan trọng trong nội dung bài viết ngày hôm nay. Tuy nó khá cần thiết nhưng nó cũng không quá khó đâu.

Đầu tiên mình sẽ nói sơ qua giải thuật tí Như thế nào để chúng ta có khả năng chuyển tab. Thì trong liên kết tab chúng ta có nút ba thì khi bấm vào nút thứ hai thì thông tin trong thẻ thứ hai phải được hiển thị và cũng giống như thông tin trong nút thẻ thứ ba và nút thứ nhất. And the tags which are add. active when click to button other, must be remove

Vì vậy nên chúng ta mới sử dụng data-attribute và id để có khả năng lấy được nội dung của từng tab không giống nhau

var tabLinks = tài liệu. truy vấnSelectorAll(“. liên kết tab”);
var tabContent = tài liệu. truy vấnSelectorAll(“. nội dung tab”);

tabLiên kết. forEach(function(el) {
el. addEventListener(“click”, openTabs);
});

hàm openTabs(el) {
var btn = el. Mục tiêu hiện tại;
var điện tử = btn. tập dữ liệu. điện tử;

tabNội dung. forEach(function(el) {
el. danh sách lớp học. loại bỏ ("hoạt động");
});

tabLiên kết. forEach(function(el) {
el. danh sách lớp học. loại bỏ ("hoạt động");
});

tài liệu. querySelector(“#” + điện tử). danh sách lớp học. thêm ("hoạt động");
// Trả về phần tử đầu tiên có id=”” được thêm lớp hoạt động

btn. danh sách lớp học. thêm ("hoạt động");
// các nút mà chúng ta nhấp vào sẽ được thêm lớp hoạt động
}

Chúng ta để ý thấy hai dòng đầu tiên tại sao mình lại không sử dụng phương thức getElementsByClassName mà lại dùng querySelectorAll thì câu trả lời của mình thì sử dụng cái nào cũng được cả nếu đấy là class thì getElementsByClassName

Để có thể chuyển tab chúng ta cần phải bắt sự kiện nhấp để có khả năng nhấp vào các nút để chuyển tab. Tham số này là từ được viết tắt bởi từ phần tử

Thì mặc định các liên kết tab và nội dung tab thư nhất có thể được thêm lớp sẵn. Nên khi chúng ta click vào liên kết tab thứ hai thì liên kết tab, nội dung tab sẽ được chạy vòng lặp nếu có kẻ nào trong liên kết tab hay nội dung tab có thêm. active then will be remove. Khi xóa xong thì liên kết tab và nội dung tab thứ hai có thể được thêm vào. tích cực

Hướng dẫn cách tạo thẻ Tab trong HTML đơn giản

( Nguồn. Tổng hợp)

the end of the end

Qua bài viết trên của ATP Web đã cung cấp cho bạn đọc một số thông tin hữu ích. Hy vọng những thông tin trên bài viết sẽ hữu ích với các bạn đọc. Cảm ơn các bạn đã dành nhiều thời gian để xem qua bài viết này nhé

Đọc tiếp