Xây dựng Tabs UI với JavaScript cơ bản
HTML-код
- Опубликовано: 19 сен 2024
- 👉 Xem Lộ Trình Học: fullstack.edu....
👉 Đăng Ký Học Offline Tại F8: short.f8team.d...
Trong bài học này chúng ta sẽ cùng nhau Xây dựng chức năng Tabs với kiến thức JavaScript cơ bản
Xây dựng Tabs UI với JavaScript cơ bản.
- Link ảnh thiết kế: dribbble.com/s...
- Link code mẫu: codepen.io/ng-...
#hoclaptrinh #hoclaptrinhmienphi #javascript #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu....
Xây dựng giao diện với HTML, CSS: fullstack.edu....
Xây dựng web responsive: fullstack.edu....
Lập trình Javascript cơ bản: fullstack.edu....
Lập trình Javascript nâng cao: fullstack.edu....
Làm việc với Terminal & Ubuntu: fullstack.edu....
Xây Dựng Website với ReactJS: fullstack.edu....
Xây dựng web với Node & Express: fullstack.edu....
HTML, CSS tips: fullstack.edu....
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu....
Xem thêm tại: fullstack.edu....
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức.
video của bác lúc nào cũng chất lượng
Thấy video mới của Anh là vào like và comment liền. mong những videos của Anh từng ngày
thức cả đêm dựng video phục vụ a em đây mà
Chất lượng. Học xong nhớ mãi
ước gì anh trong sài gòn . xa mất cũng cố đăng ký học .dạy free kỹ vậy chắc lên lơp kỹ nữa
mong anh ra nhung video ve bao mat web
quá hay ạ ! e chúc a thật nhiều sức khỏe ạ !!!!
up giờ thiêng thế anh Sơn
up sớm thế a :))
cảm ơn anh
Mong a ra khóa CSS Grid :
phương pháp học của e rất ảo:đầu tiên xem video rồi code theo
k hiểu thì xem lại k hiểu nữa thì đọc cmt
Hóng react quá anh ơi
Hay quá anh ơi
liệu anh có ra thêm javascript nâng cao không hay danh sách phát này cũng đầy đủ rồi ạ. ? em đang học đến callback js
hay quá a
Hay quá a
Do while thay foreach ❤❤❤
làm thêm slider giống swiper đi a :)))
Sếp ơi, sếp gáng nốt Nodejs với ạ
anh có dạy react hay angular k anh ơi.
Hello anh Sơn❤
Ai giải thích với. Ở phần 6:00 khó hiểu quá. querySelector là lấy phần tử đầu tiên, nhưng trong video anh click vào VueJS, Ember nó vẫn có thể xóa được class .active là sao nhỉ? Đáng lẽ nó chỉ xóa được ở tab React cơ mà nhỉ 🤔
Em nhìn kỹ selector được chọn ra là .active, một thời điểm chỉ có 1 .active thôi em.
@@F8VNOfficial ví dụ có nhiều class .active như ở phần 5:36 thì khi click vào VueJS, Ember thì nó chỉ xóa class .active của tab React chứ nhỉ. Nhưng ở 6:27 lại có thể xóa được class .active của Angular, Ember một cách khó hiểu. e nghĩ nhức hết cả đầu vẫn không hiểu được luồng chạy của nó
5:36 là khi chưa xoá .active, khi click thì nó add thêm vào nên thấy nhiều .active. Khi đã xoá .active của tab cũ trước khi click vào tab mới thì làm gì có chuyện đồng thời có nhiều .active em?
Em có 1 thắc mắc mong anh Sơn giải đáp đó là :
- Khi mà load lại trang thì code js nó chạy từ trên xuống nghĩa là nó đã chạy tab.forEach() 1 lần rồi và có thể in ra để xem các giá trị. Nhưng mà khi mình thực hiện hành vi onclick thì nó lại vào hàm tab.forEach() nó chạy lại 1 lần nữa đúng ko anh ! Tại vì nếu mà nó duyệt xong mảng từ khi load file .js rồi thì giá trị cuối cùng của mảng phải là thằng cuối cùng chứ làm sao mà khi mình thực hiện click thì nó biết là mình đang click vào thằng nào được. Chỗ thắc mắc của em là bình thường mình gọi 1 hàm hay là mình thực thi 1 sự kiện thì nó mới được chạy vậy tại sao hành vi lặp nó đã được thực hiện lúc đầu mà bây giờ mình thực hiện sự kiện onclick nó lại chạy lại 1 lần nữa mặc dù việc là sự kiện onclick nó ko hề có việc gọi lại callback của foreach(). Đó là thắc mắc của em.
Theo mình nghĩ đây là câu trả lời cho câu hỏi của bạn! ruclips.net/video/4g9ENVc2KLA/видео.html
Chúc bạn sức khoẻ và thành công!
bạn cứ hiểu đơn giản như này là khi vòng forEach được duyệt qua thì cách Element trong đó đã được gán vào một onclick, onclick này sẽ luôn tồn tại như vậy và nó chỉ đợi bạn click element được gán onclick vào là nó sẽ chạy hàm ngay
@@duyphantan9529 Bạn không hiểu ý của bạn Thanh Vo hỏi, bạn Thanh Vo hỏi: khi load lại trang thì tab.forEach() chạy....
hay
Cho em hỏi là mình làm cái này rồi mình link cái tab với radio button nữa thì mình dùng gì sẽ tiện và gọn ạ?
bind method có chức năng gì vậy a
mới 4h30 mà :>
Anh ơi làm tiếp đăng nhập đăng ký Shopee đi anh ?
Chưa học Html nên nhìn còn hơi ngáo giá nhưng ko sao 🤣 hiểu phần code js dc r
🤗🤗
học xong khóa này của anh thì học gì tiếp anh nhĩ
Chỗ này dùng cú pháp ES6 ko đc hả a? e dùng mà nó không chạy được?
tab.onclick = () => {}
do dùng arrow function nên từ khóa this ở đây không còn là cái tab mà bạn click nữa mà nó trở thành window rồi, bạn có thể console.log(this) ra để xem
3:25 cái method bind đó hình như a chưa nói đến thì phải :v
cái này là gì á bạn
bind đó theo mình nghĩ để cho nó tiện hơn thui =)) giốn như ông nào chơi game csgo hay bind mấy button để nhảy ném bom =))
Bên mk có dạy off k ạ
E không hiểu sao item. Onclick lại có thể get ra item pane theo index như vậy, khs lại có logic như vạy ạ
Em học kỹ về mảng đi em. Panes có chỉ mục như mảng thì get ra như mảng là đương nhiên rồi em.
@@F8VNOfficial e cảm ơn a ạ. Chúc a sức khỏe năm mới ạ
hihi
ra them nodejs di anh
dấu $ với $$ là gì thế anhh