Làm sao mình có thể đổi màu 1 link khi link ấy được click .yêu cầu là mình click link khác thì link ấy trở lại trạng thái ban đầu và link tiếp theo sẽ đổi màu !
Đổi màu 1 link khi link ấy được click trên Menu
Thực sự không hiểu ý bạn muốn nói, bạn nói rõ ra chút được không ?
Ý bạn là trong 1 mớ link thì chỉ có 0 hoặc 1 link đổi màu?
đúng rồi đó bạn và link khác đổi màu thì link kia bình thường lại
Theo ý của bạn thì liên quan đến css :focus
nhiều hơn css :active
website thường có menu mình click vào thì link đó đổi màu , mình click link khác thì link cũ trở lại trạng thái bình thường còn link khác thì đổi màu
mình test 2 thứ đó rồi nhưng vẫn không thành công bạn à
Nếu như vậy thì mình nghĩ nên sử dụng jQuery để làm, cụ thể thì khi click vào 1 link thì sẽ add cho link đó class .click
để đổi màu background. Bạn có thể xem qua đoạn code sau để hiểu hơn:
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Menu</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
- style.css
li{
display: inline-block;
}
.click{
background-color: red;
}
- script.js
$(document).ready(function() {
$("li").click(function() {
// Clear các thẻ li có Class click cũ
$("li").removeClass("click");
// Thêm Class
$(this).addClass("click");
});
});
3 Likes
div a:hover chẳng hạn bạn
đưa chuột qua trông có vẻ linh hoạt hơn