css点击菜单内容不同

我们在网页设计过程中经常会用到菜单，尤其是网站的导航菜单。很多网站的导航菜单都采用了点击效果，即当我们点击菜单的不同选项时，会跳转到不同的页面或展示不同的内容。而实现这样的效果，就需要用到CSS点击菜单。

/* HTML代码 */
<div class="menu">
  <ul>
  
  <li class="active"><a href="#">首页</a></li>
  
  <li><a href="#">新闻</a></li>
  
  <li><a href="#">产品</a></li>
  
  <li><a href="#">关于我们</a></li>
  </ul>
</div>
/* CSS代码 */
.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li {
  display: inline-block;
  margin-right: 10px;
}
.menu li a {
  display: block;
  padding: 5px;
  background-color: #eee;
  text-decoration: none;
  color: #333;
}
.menu li.active a {
  background-color: #333;
  color: #fff;
}
.menu li:hover a {
  background-color: #ddd;
}
 

以上是一个简单的CSS点击菜单的实现代码。我们通过HTML定义了一个包含四个选项的菜单，通过CSS代码对菜单的样式进行设置，同时定义了.active样式，用于表示当前选中的菜单项。当我们点击菜单项时，我们可以使用JavaScript来切换.active样式，从而实现点击菜单展示不同内容的效果。