Tìm hiểu cách thêm một lớp hoạt động vào phần tử hiện tại với JavaScript.
Đánh dấu nút Active/Dòng điện [nhấn]:
Hãy tự mình thử »
Yếu tố hoạt động
Bước 1] Thêm HTML:Thí dụ
& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5
1
2
3
4
5
Tìm hiểu cách thêm một lớp hoạt động vào phần tử hiện tại với JavaScript.
Đánh dấu nút Active/Dòng điện [nhấn]:
Hãy tự mình thử »
& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5
1
2
3
4
5
& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f1f1f1;
cursor: pointer;
}
Bước 2] Thêm CSS:
.active,
.btn:hover {
background-color: #666;
color: white;
}
& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5
var btnContainer = document.getElementById["myDIV"];
Bước 2] Thêm CSS:
var btns = btnContainer.getElementsByClassName["btn"];
/ * Kiểu các nút */. Btn {& nbsp; Biên giới: Không có; & nbsp; Phác thảo: Không có; & nbsp; Đệm: 10px 16px; & nbsp; màu nền: #f1f1f1; & nbsp; con trỏ: con trỏ;}
for [var i = 0; i < btns.length; i++]
{
btns[i].addEventListener["click", function[] {
var current = document.getElementsByClassName["active"];
current[0].className = current[0].className.replace[" active", ""];
this.className += " active";
}];
}
Hãy tự mình thử »
Yếu tố hoạt động
& nbsp; 1 & nbsp; 2 & nbsp; 3 & nbsp; 4 & nbsp; 5
var btnContainer = document.getElementById["myDIV"];
Bước 2] Thêm CSS:
var btns = btnContainer.getElementsByClassName["btn"];
/ * Kiểu các nút */. Btn {& nbsp; Biên giới: Không có; & nbsp; Phác thảo: Không có; & nbsp; Đệm: 10px 16px; & nbsp; màu nền: #f1f1f1; & nbsp; con trỏ: con trỏ;}
for [var i = 0; i < btns.length; i++] {
btns[i].addEventListener["click", function[] {
var current = document.getElementsByClassName["active"];
/ * Kiểu lớp Active [và các nút trên chuột-over] */. Active, .btn: Hover {& nbsp; màu nền: #666; & nbsp; màu trắng;}
if [current.length > 0] {
current[0].className = current[0].className.replace[" active", ""];
}
Bước 3] Thêm JavaScript:
this.className += " active";
}];
}
Hãy tự mình thử »
Các nút hoạt động là gì? Lớp giả CSS ____4 đại diện cho một phần tử [chẳng hạn như một nút] đang được người dùng kích hoạt. Khi sử dụng chuột, "kích hoạt" thường bắt đầu khi người dùng nhấn nút chuột chính. Thử nó Lưu ý: Trên các hệ thống có chuột đa nút, CSS chỉ định rằng lớp giả :active
CSS pseudo-class represents an element [such as a button] that is being activated by the user. When using a mouse, "activation" typically starts when the user presses down the primary mouse button.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 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.
:active
chỉ phải áp dụng cho nút chính; Trên chuột thuận tay phải, đây thường là nút ngoài cùng bên trái. On systems with multi-button mice, CSS specifies that the :active
pseudo-class must only apply to the primary button; on right-handed mice, this is typically the
leftmost button.
This paragraph contains a link:
This link will turn red while you click on it.
The paragraph will get a gray background while you click on it or the link.
/* Unvisited links */
a:link {
color: blue;
}
/* Visited links */
a:visited {
color: purple;
}
/* Hovered links */
a:hover {
background: yellow;
}
/* Active links */
a:active {
color: red;
}
/* Active paragraphs */
p:active {
background: #eee;
}
CSS
form :active {
color: red;
}
form button {
background: white;
}
Thông số kỹ thuật # selector-active |
Sự chỉ rõ # the-active-pseudo |
Bộ chọn cấp độ 4 # Active-pseudo