Nút CSS đang hoạt động
Các nút là một trong những phần tử giao diện người dùng phổ biến nhất. Nó được sử dụng để người dùng tương tác với một hệ thống và thực hiện hành động bằng cách thực hiện các lựa chọn. Pure CSS Active Buttons được sử dụng để tạo một nút hoạt động hoạt động khi người dùng nhấp vào nút. Có thể tạo nút bằng cách sử dụng và các thẻ. Show
Bạn có thể thêm một lớp CSS hoặc thêm một hoặc nhiều thuộc tính CSS trực tiếp vào nút đã chọn để hoạt động Thêm màu nền vào nút đã chọnKhi bạn muốn thêm một số kiểu CSS vào nút đã chọn/được nhấp trong JavaScript để kích hoạt nút đó, For Loop rất có thể sẽ là lựa chọn đầu tiên trong tâm trí chúng ta Nhưng, bạn hoàn toàn không cần sử dụng vòng lặp Hãy xem làm thế nào để làm điều đó trong hành động Tạo các phần tử nút HTMLĐây là một thẻ div đơn giản với một trình bao bọc id Nó có năm phần tử nút HTML trong đó Không có gì lạ mắt
Đính kèm các sự kiện nhấp chuột vào các phần tử nút HTML• Trước tiên, hãy thêm trình xử lý sự kiện nhấp vào tất cả các thành phần bên trong div
• Kiểm tra xem mục được nhấp có phải là nút bên trong chức năng gọi lại sự kiện nhấp không
• Nếu mục được nhấp KHÔNG phải là nút, hãy thoát chức năng gọi lại sự kiện nhấp Vì vậy, nó sẽ không thực thi thêm bất cứ điều gì nếu đó không phải là một nút bấm
Thêm thuộc tính CSS vào nút được nhấpThêm màu nền vào nút được chọn/nhấp bằng cách truy cập đối tượng sự kiện được chuyển vào chức năng gọi lại sự kiện nhấp
Mã này hoạt động tốt cho đến khi nhấp vào nút thứ hai Sau đó, cả nút được nhấp lần đầu tiên và lần thứ hai sẽ có màu nền đỏ để biểu thị trạng thái hoạt động Nhưng những gì chúng tôi muốn là chỉ thêm màu nền cho mục hiện được nhấp và xóa nó khỏi mục đã chọn trước đó Để làm được điều đó, chúng ta cần chụp nút đã chọn/đã nhấp trước đó và xóa màu nền khỏi nút đó Chụp mục đã chọn/đã nhấp trước đó• Khai báo một hằng gọi là prevButton bên ngoài sự kiện nhấn nút • Đặt giá trị ban đầu của nó thành null
• Bây giờ hãy kiểm tra xem có nút nào được thêm vào hằng số prevButton không Nếu có, hãy xóa màu nền bằng cách đặt giá trị của nó thành không
• Cuối cùng, thêm mục hiện được nhấp vào prevButton Bằng cách này, prevButton không có bất kỳ đối tượng nút nào được nhấp trước đó khi người dùng nhấp vào bất kỳ nút nào lần đầu tiên Và nó sẽ khả dụng khi người dùng nhấp vào bất kỳ nút nào lần thứ hai trở đi
Thêm một lớp CSS vào nút đã chọn/được nhấp• Việc chỉ thêm một thuộc tính CSS qua JavaScript sẽ gặp một số hạn chế Chúng tôi luôn khuyên bạn nên tạo riêng quy tắc CSS, chuyển đổi nó bên trong JavaScript • Định nghĩa một quy tắc CSS được gọi là. hoạt động với một nền tài sản duy nhất. màu đỏ ________số 8• Thêm các. lớp hoạt động cho đối tượng nút hiện được nhấp là e. Mục tiêu • Gỡ bỏ. lớp tích cực từ prevButton
Nó sẽ hoạt động chính xác như trước đây, nhưng lần này chúng tôi có nhiều quyền kiểm soát hơn trong việc tạo kiểu cho trạng thái nút hoạt động theo bất kỳ cách nào chúng tôi muốn bằng cách sử dụng. lớp năng động Làm cách nào để kích hoạt một nút trong JavaScript?A) HTML. Add the following HTML Code to your editor //defining button and input field . Giải thích mã. . B) Mã Javascript. . Giải thích mã. . Hoàn thành mã. . đầu ra. . Sử dụng jQuery để bật/tắt nút Các nút hoạt động là gì?Các nút là một trong những phần tử giao diện người dùng phổ biến nhất. Nó được sử dụng để người dùng tương tác với một hệ thống và thực hiện hành động bằng cách thực hiện các lựa chọn. Các nút Hoạt động CSS thuần túy được dùng để tạo một nút hoạt động hoạt động khi người dùng nhấp vào nút . Nút có thể được tạo bằng thẻ
Cái gì được kích hoạt trong CSS?Các. lớp giả CSS đã bật đại diện cho mọi phần tử đã bật . Một phần tử được kích hoạt nếu nó có thể được kích hoạt (được chọn, nhấp vào, nhập vào, v.v. ) hoặc chấp nhận tiêu điểm. Phần tử này cũng có trạng thái bị vô hiệu hóa, trong đó không thể kích hoạt hoặc chấp nhận tiêu điểm.
Nút tiêu điểm CSS là gì?Các. focus Lớp giả CSS đại diện cho một phần tử (chẳng hạn như đầu vào biểu mẫu) đã nhận được tiêu điểm . Nó thường được kích hoạt khi người dùng nhấp hoặc chạm vào một phần tử hoặc chọn phần tử đó bằng phím Tab của bàn phím. |