jQuery_Tab切换
昨天看了点视频,今天敲了敲,代码还是可以再优化的,先贴出来,怎么着也是第一次。。。废话不多说,写的很简单,不喜勿喷!
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> input {width: 100px; height: 30px;} .active {background: red;} .con {display: none; width: 420px; height: 300px; border:red 1px solid;} </style> <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <title>jQuery版tab切换</title> </head> <body> <div> <input class="active" value="1" type="button" /> <input value="2" type="button"/> <input value="3" type="button"/> <input value="4" type="button"/> <div class="con" style="display: block;">1111</div> <div class="con" >2222</div> <div class="con">3333</div> <div class="con">4444</div> </div> <script type="text/javascript"> $(function(){ $('input').click(function(){ $('input').removeClass('active'); $(this).addClass('active'); var i = $(this).index(); $('.con').css('display',''); $('.con').eq(i).css('display','block'); }); }) </script> </body> </html>