導讀跟大家講解下有關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中文網
免責聲明：本文由用戶上傳，如有侵權請聯系刪除！