ホームページ > 記事 > ウェブフロントエンド > JS+jQueryで簡単なタブを書く例
この記事の例では、JS で単純なタブを記述するための具体的なコードを共有します。具体的な内容は次のとおりです
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery选项卡</title> <style type="text/css"> #p1 p{width: 200px;height: 200px;border: 1px red solid;display: none;} .active{background:#999;} </style> <!-- 原生的JS --> <script type="text/javascript"> window.onload=function(){ var op=document.getElementById('p1'); var aInput=document.getElementsByTagName('input'); var aCon=op.getElementsByTagName('p'); 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(){ $('#p1').find('input').click(function(){ $('#p1').find('input').attr('class',''); $('#p1').find('p').css('display','none'); $(this).attr('class','active'); $('#p1').find('p').eq($(this).index()).css('display','block'); }) }) </script> </head> <body> <p id="p1"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <p style="display: block;">11111</p> <p>22222</p> <p>33333</p> </p> </body> </html>
以上がJS+jQueryで簡単なタブを書く例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。