js实现tab选项卡切换
在我们平时浏览网站的时候，经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了JS后，开始要写出一些简单的特效。今天我也分享一个简单tab标签切换的例子。在做Tab标签切换时，首先是先写好整体框架。在这里，先将内容区的三个div分别隐藏。然后当鼠标放在tab标签上时，再执行相关操作，将div内容显示出来。
先附上代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } #div { width: 640px; height: 480px; border: 2px solid #cccccc; margin: 100px auto; position: relative; } #top { height: 45px; } #top span { display: inline-block; width: 156px; background-color: lightskyblue; line-height: 45px; text-align: center; cursor: pointer; } #top span.choose { background-color: deepskyblue; } #content li { display: none; position: absolute; top: 60px; left: 0; } #content li.choose { display: block; } #content li img{ display: block; width: 640px; height: 420px; } body { background-image: url("img/bg.gif"); } </style> </head> <body> <div id="div"> <div id="top"> <span class="choose">新闻01</span> <span>新闻02</span> <span>新闻03</span> <span>新闻04</span> </div> <div id="content"> <ul> <li class="choose"><img src="https://www.qiquanji.com/mip/data/img/dmj/201904021554214156149153.jpg" alt=""/></li> <li><img src="https://www.qiquanji.com/mip/data/img/dmj/201904021554214156110755.jpg" alt=""/></li> <li><img src="https://www.qiquanji.com/mip/data/img/dmj/201904021554214156210514.jpg" alt=""/></li> <li><img src="https://www.qiquanji.com/mip/data/img/dmj/201904021554214157190473.jpg" alt=""/></li> </ul> </div> </div> <script> //获取列表中的元素 var spanO=document.getElementsByTagName("span"); var liO=document.getElementsByTagName("li"); //循环遍历每个span标签 for(var i=0;i<spanO.length;i++) { //添加自定义属性，索引 spanO[i].setAttribute("index",i); //注册点击事件，添加事件处理函数 spanO[i].onclick=function() { //循环遍历每个span for(var j=0;j<spanO.length;j++) { //移除span的样式 spanO[j].removeAttribute("class"); } //给每个span赋予新样式 this.className="choose"; //循环遍历每个li for(var k=0;k<liO.length;k++) { //移除li的样式 liO[k].removeAttribute("class"); } liO[this.getAttribute("index")].className="choose"; } } </script> </body> </html> 
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知