css导航栏，点击切换

CSS导航栏是网站设计中必不可少的元素之一，它能够为用户提供方便的导航和操作体验，使得网站更加易于使用和访问。

其中，点击切换是实现导航栏交互的一种常用方式，它可以通过点击不同的选项来切换显示不同的内容，从而实现网页功能的切换和展示。

.menu {
display: flex;
justify-content: center;
align-items: center;
background-color: #333;
color: #fff;
width: 100%;
height: 50px;
}
.menu li {
list-style: none;
margin-right: 20px;
cursor: pointer;
}
.menu li:hover {
color: #f8bf3d;
}
.active {
color: #f8bf3d;
}

上述代码是一个简单的CSS导航栏样例，其中menu代表导航栏的整个容器，li代表每个导航选项。

通过JavaScript来实现导航栏的点击切换功能，代码如下：

var menuItems = document.querySelectorAll('.menu li');
for (var i = 0; i < menuItems.length; i++) {
menuItems[i].addEventListener('click', function() {
for (var j = 0; j < menuItems.length; j++) {
menuItems[j].classList.remove('active');
}
this.classList.add('active');
});
}

在上述代码中，我们使用querySelectorAll方法获取到所有的导航选项，然后通过遍历的方式为每个选项添加点击事件。在点击事件中，我们先移除当前菜单中所有的active类，然后再为当前选项添加active类，从而实现点击切换的效果。

总之，CSS导航栏的点击切换是非常实用和方便的，不仅能够增加网站的用户体验，还能够提升网站的品质和功能。