JS实现选项卡的切换

选项卡的HTML结构部分如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><div id="tab" class="tab"><ul id='ul'><li class="active">选项1</li><!-- 选项1为默认选中状态 --><li>选项2</li><li>选项3</li></ul><div class="cont" style="display: block;">我是内容1</div><!-- 内容一为默认显示状态，其他内容均隐藏 --><div class="cont">我是内容2</div><div class="cont">我是内容3</div>     </div></body>
</html>

此时代码如下结果如下：

CSS代码部分如下，引用时需要将其引入HTML文件。

* {margin: 0;padding: 0;list-style: none;}.tab {width: 300px;height: 300px;border: 2px solid red;margin: 100px auto;position: relative;}.tab ul {overflow: hidden;border-bottom: 2px solid #ccc;}.tab ul li {height: 30px;line-height: 30px;float: left;background-color: skyblue;padding: 0 10px;margin: 0 10px;}.tab .cont {width: 100%;height: 100%;position: absolute;display: none;/*令选项卡内容隐藏*/}/*选项卡被选择状态的class类*/.active {color: red;}

此时代码运行结果如下：

需求是点击选项卡，选项卡变为选择状态，并显示相关内容。

而其他选项卡为未被选中状态，其内容隐藏。

完整的JS代码如下，引用时需要将JS代码段放进在body结构内，并置于HTML元素之后。

     <script type="text/javascript">var otab=document.getElementById('tab');var ali=document.getElementsByTagName('li');//获取选项卡数组var acont=document.getElementsByClassName('cont');//获取选项卡相关内容的数组//遍历选项卡数组for(var i =0 ; i < ali.length ; i++){  ali[i].index=i;ali[i].onclick=function(){//此处的内部for循环，作用为：//使得之前被选中的选项卡取消选中//使得之前显示的选项卡内容全部隐藏display为none//实现不会有两个选项卡同时显示for(var j=0;j<ali.length;j++ ){ali[j].className="";acont[j].style.display='none';}//当i项遇到点击事件时，i项选项卡为avtive选择状态，其内容为block显示状态this.className="active";acont[this.index].style.display="block";}}</script>

最后结果可以实现选项卡的切换：

JS实现选项卡的切换相关推荐

html5点击切换选项卡,简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果使用方法: 1.将附件中的index ...
关于选项卡的切换——JS实现
对于选项卡的切换有很多种方法,这里介绍的是一种易于理解和简单的方法.JS实现对div的操作,首先就得将div给取出来,然后对该div进行操作.如果要操作的div或者其它属性有多个可以采用documen ...
html手机页面选项卡,移动端网页纯原生js选项卡tab切换
适合移动网页纯原生js选项卡tab切换 *{ margin: 0; padding: 0} ul,li{ list-style: none} .tabClick{ background: #f3f3f ...
table 手机滑动_【推荐下载】html5手机端手指滑动选项卡滚动切换效果(转)
html5 手机端手指滑动选项卡滚动切换效果 ( 转 ) 2017/09/25 41 !DOCTYPE html html lang="en" head meta charset= ...
Vue2利用分支、循环、属性样式绑定实现选项卡图片切换
课前准备带领大家学习分支(if.else).以及循环(for) 至于属性与样式绑定在上一篇文章已经讲解分支循环实现选项卡分支(if.else if.else) 主要指if.else if.e ...
初学者怎么用js写选项卡_初学者极客：我的PC是否需要图形卡？
初学者怎么用js写选项卡 There's always a lot of chatter about computer graphics cards, thanks to bigger and bet ...
js选项卡 php,JS实现选项卡实例详解_javascript技巧
本文实例讲述了JS实现选项卡的方法.分享给大家供大家参考,具体如下: 思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的. 1.首先获 ...
JS+CSS控制左右切换鼠标可控的无缝图片滚动代码
代码简介: 以前见过这种效果,但是是基于FLASH技术,现在是纯用JS实现的,代码有点多,不过效果还不错,实际上它也是一个图片滚动,只不过它完全是用鼠标点击控制的,也就是说鼠标不点击的时候它是静止的, ...
js利用tab键切换当前页面_JS实现的tab切换并显示相应内容模块功能示例
本文实例讲述了JS实现的tab切换并显示相应内容模块功能.分享给大家供大家参考,具体如下: 思路:一层循环遍历操作的元素并获取当前遍历到的元素的下标,通过下标去选择显示对应的内容模块. 二层循环将元素 ...

JS实现选项卡的切换

JS实现选项卡的切换相关推荐

最新文章

热门文章