《css+js实现选项卡.docx》由会员分享，可在线阅读，更多相关《css+js实现选项卡.docx（4页珍藏版）》请在三一办公上搜索。
1、css+js实现选项卡实验楼官方网站： css+js实现选项卡 一、项目简介 本次项目课是利用css+js实现选项卡。 二、涉及知识点 本次项目课涉及到html、css、js这些方面的知识。 三、效果截图 四、源代码下载 $ git clone 实验楼官方网站： 五、项目实战 1.编写布局 tabs Tab1 Tab2 Tab3 Welcome to ShiYanLou! ShiYanLou is good! Good good study, Day day up! 第一步做完仅仅是完成布局，三个元素对应三个选项，三个p元素跟选项所对应，效果如下图。 2.添加样式 上面一步完成了布局，这一步将
2、添加样式，让页面看起来有选项卡的效果。 首先要让ul元素看起来像是一组选项，可以通过添加下面样式实现： /* 调整字体 */ * font-family: Tahoma; font-size: 14px; /* 去掉li前面的三个小圆点 */ul list-style: none; margin: 0; padding: 0; 实验楼官方网站： /* 让li元素显示在一行，把触碰到li时的光标显示为手的样式 */li display: inline; cursor: pointer; /* 设定第一个li的背景色 */li:first-child background-color: #3cf;
3、 /* 设定第二个li以及之后的背景色 */li:nth-child(n + 2) background-color: #3c9; /* 设定p元素的默认样式 */p position: relative; top: -1px; margin: 0; width: 300px; height: 300px; background-color: #3cc; /* 把第二个p以及之后的元素隐藏 */p:nth-child(n + 3) display: none; 做完这步就有了选项卡的效果，但是当触碰到其他的选项时，选项卡的内容并不会改变。 3.添加行为 这一步将实现触碰到其他的选项时，选项卡的
4、内容也随之改变。 首先在布局中添加触碰到li元素时的响应事件： Tab1Tab2Tab3 然后添加js实现动态地改变选项卡的内容： 实验楼官方网站： /触碰到li时的回调函数function hover(tab) showAndHiddenOthers(tab.id); /根据id动态地显示和隐藏选项卡function showAndHiddenOthers(id) for (var i = 0, len = document.getElementsByTagName(li).length; i len; i+) if (idid.length - 1 = i + 1) /此元素是当前触碰的l
5、i，显示对应的选项卡并改变li的背景色 document.getElementById(p + (i + 1).style.display = block; document.getElementById(tab + (i + 1).style.backgroundColor = #3cf; else /此元素不是当前触碰的li，隐藏其他的选项卡并改变li的背景色 document.getElementById(p + (i + 1).style.display = none; document.getElementById(tab + (i + 1).style.backgroundColor = #3c9; 做完这一步就简单地实现了选项卡效果。 六、小结 本次项目课实现了选项卡效果，主要是使用了css的display属性和js的onmouseover事件。 实验楼官方网站： 七、思考题 这里只是简单地实现，你是否能够做得更炫呢？例如切换选项卡的时候，选项卡是从左划出，从右划进。 本文详细出处
