标签：padding class bsp button fun http line isp htm
今晚，我们来用实现一个简单的选项卡切换代码，主要代码只有两行。
效果：
思路：通过切换JQuery控制div的显隐和样式的改变
其中那个一个div显示，其余全隐藏
实现：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} #content{ width: 200px; height: 200px; border:1px solid #ccc; overflow: hidden; margin-top: -1px; } button{ border:1px solid #ccc; outline:none; } .active{ background: white; border-bottom: 1px solid white; } #content>div{ width: 200px; height: 200px; } </style> </head> <body> <button class="active">按钮1</button> <button>按钮2</button> <button>按钮3</button> <div id="content"> <div>标签页11111</div> <div>标签页2222</div> <div>标签页3333</div> </div> </body> </html> <script src="jquery-1.11.3.js"></script> <script> $("button").click(function(){ // 控制样式的改变 当前按钮添加样式，他的同级兄弟全部去除样式 $(this).addClass(‘active‘).siblings().removeClass(‘active‘); // 控制div的显隐 当前按钮对应的div显示，他的同级兄弟全部隐藏 $("#content>div").eq($(this).index()).css("display","block").siblings().css("display","none"); }) </script>
简单吧，其实只要思路出来了没什么难的，今天被问这个怎么实现，顺便就写一下。希望能帮到大家
标签：padding class bsp button fun http line isp htm
原文地址：https://www.cnblogs.com/suihang/p/11391862.html
