以下是一个示例代码,通过给当前路线项添加一个类名来实现突出显示。
HTML:
- 路线1
- 路线2
- 路线3
CSS:
.route-item {
padding: 10px;
background-color: #fff;
}
.route-item.active {
background-color: #f00;
}
JavaScript:
const routeItems = document.querySelectorAll('.route-item');
routeItems.forEach(item => {
item.addEventListener('click', () => {
routeItems.forEach(item => item.classList.remove('active'));
item.classList.add('active');
});
});
在上面的示例中,我们首先获取所有具有 .route-item
类名的元素并将其存储在 routeItems
变量中。然后,我们通过遍历 routeItems
并为每个元素添加一个点击事件监听器。
当某个路线项被点击时,我们首先使用 routeItems.forEach(item => item.classList.remove('active'))
将所有路线项的类名 active
移除,然后通过 item.classList.add('active')
给当前点击的路线项添加 active
类名。
通过这样的方式,当前路线项就会突出显示出来。