如何实现选项卡

 

选项卡

 

下面是选项卡的制作，首先是页面的布局用一个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循环给他一个索引添加点击事件，遍历循环内容组将当前显示的内容隐藏去掉对应按钮的高亮样式，这样选项卡就完成了。如下图：

页面的布局和功能的代码写完后，到页面中就可以点击按钮实现切换的效果，如下面三张图片所示，点击三个不同的按钮切换不同的内容。