网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
大家在浏览网站时,有没有注意到导航的样式有很多种,比如面包屑导航、下拉菜单导航,手风琴导航等等,那作为一个前端开发人员,你知道如何用原生JS实现手风琴导航效果吗?这篇文章就给大家讲讲原生JS制作手风琴效果的思路以及JS手风琴效果代码,有一定的参考价值,感兴趣的小伙伴可以看看。
用JS制作手风琴导航需要用到很多JavaScript知识,比如toggle,for循环,if函数等等,如有不清楚的同学可以参考PHP中文网的相关文章,或者访问 JavaScript视频教程,希望可以帮助到你!
实现手风琴导航效果的思路:当鼠标点击第一个按钮时,第一个按钮里面的内容显示出来,点击第二个按钮时,第二个按钮里面的内容显示出来,以此类推。在JavaScript中,用for循环遍历有多少个按钮,用if函数判断maxHeight,从而实现按钮内容的显示和隐藏,具体代码如下:
HTML部分:设置三个按钮以及按钮所对应的内容
<h2>手风琴动画效果</h2>
<button class="btn">选项 1</button>
<div class="p1">
<p>内容1</p>
</div>
<button class="btn">选项 2</button>
<div class="p1">
<p>内容2</p>
</div>
<button class="btn">选项 3</button>
<div class="p1">
<p>内容3</p>
</div>