这篇博客介绍了如何利用JavaScript和HTML实现网页左侧菜单栏的动态效果。当鼠标点击菜单项时，相应内容显示，其他内容隐藏。关键知识点包括CSS的display属性和JavaScript的onclick事件。通过设置display属性为none或block，实现菜单内容的隐藏和显示。博客提供了实现这一功能的完整代码示例。
今天刚学了js的主要内容和HTML网页布局，开始着手写个菜单栏。下面先放上实际写出来的效果图。一目了然，这个菜单栏要达到的要求是：鼠标点击菜单的时候，对应的内容会显示出来，而其他菜单的内容则不显示。
简介这个菜单栏运用的主要知识点：CSS中display 和js中onclick；
display：主要属性有none,block,inline...none属性表示隐藏该标签，block和inline属性分别表示以块级元素和内联元素显示；display为none时就解决了我们需要的只有点击的菜单对应的内容显示出来，其它菜单的内容不显示。
接下来是解决怎样出现这种点击就显示出来的动态效果呢，这就运用到JavaScript的知识。我们在菜单栏定义一个‘按钮’函数，当我们点击其中一个菜单栏时，这个菜单栏的display属性去掉或者为block表示内容可见，其他菜单栏的display为none表示内容不可见，也就实现了我们的菜单栏的操作。
附上整个菜单栏的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
最低0.47元/天 解锁文章
扫一扫
1926
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
