css导航获取选中id

在使用CSS导航时，常常需要获取选中ID，以便进行相关的操作。下面我们将介绍如何通过CSS获取选中ID。

.nav {
    display: flex;
    flex-wrap: wrap;
}
.nav-item {
    margin-right: 10px;
}
.nav-item a {
    color: #333;
    text-decoration: none;
}
.nav-item.active a {
    color: #f00;
}
    

我们假设有一个导航栏，由多个导航项组成，每个导航项都有一个唯一的ID。当用户点击导航项时，我们需要获取点击的导航项的ID。

const navItems = document.querySelectorAll('.nav-item');
    navItems.forEach(navItem =>
 {
    navItem.addEventListener('click', () =>
 {
    console.log(navItem.id);
    navItems.forEach(item =>
 {
    item.classList.remove('active');
}
    );
    navItem.classList.add('active');
}
    );
}
    );
    

在上面的代码中，我们首先获取所有导航项，然后对每个导航项添加一个点击事件监听器。当用户点击导航项时，我们通过navItem.id获取其ID，并将其输出到控制台中。

同时，我们还将之前被选中的导航项的active类移除，并给当前选中的导航项添加active类，以便进行样式的更改。

通过以上代码，我们就可以获取选中的导航项的ID，并进行相应的操作。当然，具体实现还需要根据实际需求进行相应的调整。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！