版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创!
恰饭广告
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> span{ display: inline-block; width: 100px; height: 40px; border: 1px solid pink; border-bottom: none; } .box{ width: 500px; height: 500px; border: 1px solid pink; list-style-type: none; } .add2,.add3,.add4{ display: none; } </style> </head> <body> <span id="btn1">1</span> <span id="btn2">2</span> <span id="btn3">3</span> <span id="btn4">4</span> <div class="box" id=""> <li class="add1">555555555</li> <li class="add2">666666666</li> <li class="add3">777777777</li> <li class="add4">888888888</li> </div> <script src="jquery-3.2.1.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $(".add1").show(); $(".add2,.add3,.add4").hide(); }); $("#btn2").click(function(){ $(".add2").show(); $(".add1,.add3,.add4").hide(); }); $("#btn3").click(function(){ $(".add3").show(); $(".add1,.add2,.add4").hide(); }); $("#btn4").click(function(){ $(".add4").show(); $(".add1,.add2,.add3").hide(); }); }); </script> </body> </html>
原文链接:https://www.idaobin.com/archives/243.html
让我恰个饭吧.ヘ( ̄ω ̄ヘ)
恰饭广告