导读跟大家讲解下有关JS怎么做出选项卡，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说JS怎么做出选项卡，小编也收集到了有关JS
跟大家讲解下有关JS怎么做出选项卡，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说JS怎么做出选项卡，小编也收集到了有关JS怎么做出选项卡的相关资料，希望大家看到了会喜欢。
这次给大家带来的是JS怎么做出选项卡，选项卡是我们在项目中经常使用到的功能，如何实现呢？这篇文章就给大家好好分析一下。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery选项卡</title> <style type="text/css"> #div1 div{width: 200px;height: 200px;border: 1px red solid;display: none;} .active{background:#999;} </style> <!-- 原生的JS --> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1'); var aInput=document.getElementsByTagName('input'); var aCon=oDiv.getElementsByTagName('div'); for (var i = 0; i < aInput.length; i++) { aInput[i].index=i; aInput[i].onclick=function(){ for (var i = 0; i < aInput.length; i++) { aInput[i].className=''; aCon[i].style.display=''; } this.className='active'; aCon[this.index].style.display='block'; } } } </script> <!-- jquery写法 --> <script type="text/javascript" src='../jquery-3.2.1.min.js'></script> <script type="text/javascript"> $(function(){ $('#div1').find('input').click(function(){ $('#div1').find('input').attr('class',''); $('#div1').find('div').css('display','none'); $(this).attr('class','active'); $('#div1').find('div').eq($(this).index()).css('display','block'); }) }) </script></head><body> <div id="div1"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div style="display: block;">11111</div> <div>22222</div> <div>33333</div> </div></body></html>相信看了以上介绍你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
相关阅读：
怎样使用Vue的自定义指令完成一个下拉菜单
关于HTTP/2服务器推送
用jQuery做出对数组去重及排序的操作
以上就是JS怎么做出选项卡的详细内容，更多请关注php中文网其它相关文章！
来源：php中文网
免责声明：本文由用户上传，如有侵权请联系删除！