Nút css codepen
Hôm nay mình sẽ hướng dẫn các bạn xây dựng một chức năng rất phổ biến hiện nay trong các trang web đó là các tab Tại Sao Mình Lại Hướng Dẫn Các Bạn Dựng TabThì các bạn thử search trên google có rất nhiều bài viết hướng dẫn các bạn làm tab, các plugin như bootstrap tab,. Nhưng mà mình vẫn muốn viết bài để hướng dẫn các bạn. Mục đích của mình là gì? Mục Đích Bài ViếtMục đích của bài viết này giúp các bạn ôn lại các kiến thức về html, css và js. Không phụ thuộc quá nhiều vào các thư viện giúp các bạn nâng cao khả năng tư duy, logic và khả năng giải quyết vấn đề Bắt Đầu Thôi NàoLên Ý TưởngThì các tab này nó sinh ra dùng để hiển thị các thể loại khác nhau theo từng tab khác nha. Chúng ta sử dụng html, css để tạo bố cục và sử dụng JS để hiểu các tab chuyển đổi. Code Thôi NàoMã HTMLTrước tiên các bạn cần phải mã cho mình một bộ khung cầ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.
lưu ý. Mình đang sử dụng codepen. io để code tạo tab, các bạn cũng có thể sử dụng text editor hay IDE khác để code tạo tab nha. Mã CSS Để tab đó chúng ta dễ nhìn hơn, bố cục cục bộ đẹ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.
Các bạn cùng xem thử kết quả khi ta code CSS cho nó nha Cuối cùng thì công việc chia bố cục cũng như giao diện cho tab chúng ta cũng đã làm xong một cách cũng khá là ổn giờ đến công đoạn làm hiệu ứng chuyển tab Mã JavascriptĐây là phần khá quan trọng trong bài viết ngày hôm nay. Tuy nó khá quan trọng nhưng nó cũng không quá khó đâu.
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 sử 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 đó là lớp thì getElementsByClassName. Thì mặc định tab liên kết và nội dung tab thư mới nhất sẽ được thêm lớp sẵn. Nên khi chúng ta nhấp 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 hoặc nội dung tab có thêm. active then will be remove. Khi remove xong thì liên kết tab và nội dung tab thứ hai sẽ được thêm vào. tích cực Chúng ta cùng xem thử nó chuyển tab như thế nào nhé Các bạn có thể tham khảo full source code mình đã code trong codepen tại đây Lời KếtVậy Là Xong bài viết Hướng Dẫn Xây Dựng Tab Với HTML, CSS và Javascript rồi nhé. Mình mong muốn sau bài viết này các bạn có thể nắm bắt thêm về các kiến thức HTML, CSS và JS. Học thêm được nhiều kiến thức tuy không mới lắm nhưng cũng có thể giúp được phần nào đó của các bạn. Có thể tự tay mình làm những dự án không cần thiết phải quá đặc biệt nhưng nó do chính bạn làm thì cũng coi như là thành quả trong quá trình bạn học được Nếu các bạn cảm thấy bài viết của mình hay thì các bạn có thể ủng hộ mình để mình có thêm động lực ra những bài viết chủ đề hay và chất lượng hơn ủng hộ mình tại đây nha |