三餐的菜单

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术： jquery

作者：张维裕

撰写时间：2022/5/18

• jquery是一门重要的技术，把原本复杂繁多的js代码简单化。
• 案例;菜单

1. 用html的创建菜单的主体内容。用一个大盒子装住所有内容用一个小盒子做成标题一个标题对应一个小盒子。

 

 

 

2.给他们添加css样式并且只显示一个盒子的内容。此时，点击它是不会动的

 

 

3用script标签添加相关的jquery资料

4.设定script标签设定jquery的样式。

5.获取li标签绑定点击事件

6.点击到那个li标签就给哪个li标签设定高亮效果on并且用过滤的方法去掉其li标签的高亮效果

7. 找到索引值相同的元素点到哪个li标签对应的菜单内容就会出现没点到的则隐藏

效果：点击上面的标题就会有对应的食物出现

 

总结：可以来回切换，jQuery使得js的代码更加简洁和方便

这是我所学到的jquery的知识分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔