1. click event
The effect is to click the switch button to switch the background color repeatedly.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>click 事件</title> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ $('#btn').click(function(){ $('.box').toggleClass('sty'); }); }) </script> <style type="text/css"> .box{ width:200px; height:200px; background-color:gold; } .sty{ background-color:green; } </style> </head> <body> <input type="button" name="" value="切换" id="btn"> <div class="box"></div> </body> </html>
2. jquery tab
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .btns { width:500px; height:50px; } .btns input{ width:100px; height:50px; background-color:#ddd; color:#666; border:0px; } .btns input.cur{ background-color:gold; } .contents div{ width:500px; height:300px; background-color: gold; display:none; line-height:300px; text-align:center; } .contents div.active{ display: block; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ //#btns input represents the first input element $('#btns input').click(function() { // this is the native object $(this).addClass('cur').siblings().removeClass('cur'); //$(this).index() Get the index value of the current button's level range $('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active'); }); }) </script> </head> <body> <div class="btns" id="btns"> <input type="button" value="tab01" class="cur"> <input type="button" value="tab02"> <input type="button" value="tab03"> </div> <div class="contents" id="contents"> <div class="active">tab text content one</div> <div>tab text content two</div> <div>tab text content three</div> </div> </body> </html>