css+js实现收藏功能
时间: 2023-09-04 08:08:50 浏览: 80
要实现收藏功能,我们需要使用JavaScript来处理用户的点击事件,并使用CSS来显示相应的样式。以下是一个实现收藏功能的示例代码:
HTML代码:
```
<div id="favorite" class="favorite-icon" onclick="toggleFavorite()">
<i class="far fa-heart"></i>
<span>Add to Favorites</span>
</div>
```
在这个示例中,我们创建了一个带有图标和文本的div元素,并为它设置了一个ID为“favorite”,一个class为“favorite-icon”,并且添加了一个onclick事件处理函数“toggleFavorite()”。
CSS代码:
```
.favorite-icon {
display: flex;
align-items: center;
cursor: pointer;
}
.favorite-icon i {
font-size: 24px;
margin-right: 5px;
}
.favorite-icon.added i {
color: #FF4136;
}
.favorite-icon.added span {
color: #FF4136;
}
```
在这个示例中,我们使用了Flex布局来将图标和文本垂直居中,并设置了一个指针光标以显示为可点击元素。我们还定义了一个“.added”类,用于显示已添加到收藏夹的样式。
JavaScript代码:
```
function toggleFavorite() {
var favorite = document.getElementById('favorite');
if (favorite.classList.contains('added')) {
favorite.classList.remove('added');
favorite.querySelector('span').innerHTML = 'Add to Favorites';
} else {
favorite.classList.add('added');
favorite.querySelector('span').innerHTML = 'Remove from Favorites';
}
}
```
在这个示例中,我们创建了一个名为“toggleFavorite()”的函数,用于处理当用户单击收藏按钮时的事件。在该函数中,我们获取了ID为“favorite”的元素,并检查其是否包含了“added”类。如果包含,则将其删除,并将文本设置为“Add to Favorites”;否则,将其添加,并将文本设置为“Remove from Favorites”。
当用户单击收藏按钮时,toggleFavorite()函数将被调用,并根据情况添加或删除“added”类。CSS样式将根据类的存在与否来显示相应的样式。
这样,我们就实现了一个基本的收藏功能。当用户单击收藏按钮时,它会切换到添加或删除状态,并在UI上显示相应的样式。