用jQuery实现选项卡，比原生JS更加简便，但是原理还是一样的：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #wrap { width: 400px; height: 300px; margin: 100px auto; }
#wrap div { width: 400px; height: 300px; border: #333 2px solid; line-height: 300px; text-align: center; font-size: 50px; display: none; }
#wrap .active { background: red; color: #fff; } </style> <script src="jquery.min.js"></script> <script> $(function(){ var aBtn = $(‘input‘); var aDiv = $(‘#wrap div‘);
aBtn.click(function(){ aBtn.removeClass(‘active‘); aDiv.hide(); $(this).addClass(‘active‘); aDiv.eq($(this).index()).show(); }); }); </script></head><body><div id="wrap"> <input type="button" value="按钮1" class="active"> <input type="button" value="按钮2"> <input type="button" value="按钮3"> <div style="display: block;">div1</div> <div>div2</div> <div>div3</div></div></body></html>
时间： 2024-08-09 02:11:35