选项卡
下面是选项卡的制作,首先是页面的布局用一个div设置一个大盒子,和头部的点击切换按钮搜索兰部分,用ul、li标签来里面放置一个a标签完成,然后是Tab切换内容部分的布局。
然后是js的代码,首先是写他的window.onload的点击事件,通过document.getElementById获取到页面ID为tab_tit元素下面的li标签,再通过document.getElementById获取到内容部分的classname;再判断一下按钮组与内容组的长度是否一致;之后用for循环完成点击切换i=0;i<liList.length;i++ 不断的自加1,通过for循环给他一个索引添加点击事件,遍历循环内容组将当前显示的内容隐藏去掉对应按钮的高亮样式,这样选项卡就完成了。如下图:
页面的布局和功能的代码写完后,到页面中就可以点击按钮实现切换的效果,如下面三张图片所示,点击三个不同的按钮切换不同的内容。