1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #tab 12 { 13 width: 300px; 14 height: 300px; 15 margin: 50px auto; 16 border: 1px solid red; 17 } 18 #tab1 19 { 20 width: 300px; 21 height: 300px; 22 margin: 50px auto; 23 border: 1px solid red; 24 } 25 #con 26 { 27 width: 500px; 28 height: 30px; 29 } 30 #con span 31 { 32 width: 98px; 33 height: 30px; 34 border: 1px solid #ccc; 35 display: block; 36 float: left; 37 line-height: 30px; 38 text-align: center; 39 } 40 #list 41 { 42 list-style: none; 43 } 44 #list li 45 { 46 width: 300px; 47 height: 300px; 48 line-height: 300px; 49 text-align: center; 50 display: none; 51 } 52 #con .select 53 { 54 background: #ddd; 55 } 56 #list .lis 57 { 58 display: block; 59 } 60 </style> 61 </head> 62 <body> 63 <div id="tab"> 64 <div id="con"> 65 <span class='select'>标题一</span> 66 <span>标题二</span> 67 <span>标题三</span> 68 </div> 69 <ul id="list"> 70 <li class="lis">内容一</li> 71 <li>内容二</li> 72 <li>内容三</li> 73 </ul> 74 </div> 75 <div id="tab1"> 76 <div id="con"> 77 <span class='select'>标题一</span> 78 <span>标题二</span> 79 <span>标题三</span> 80 </div> 81 <ul id="list"> 82 <li class="lis">内容一</li> 83 <li>内容二</li> 84 <li>内容三</li> 85 </ul> 86 </div> 87 <script src="jquery-1.8.3.min.js"></script> 88 <script> 89 90 $(function() { 91 $.fn.extend({ 92 Tab:function(tit,select,con,show) { 93 var that=$(this);//保存this，this指向实例化对象tab 94 $(this).find(tit).click(function() { 95 var i=that.find(tit).index(this);//获取当前点击span的下标 96 $(this).addClass(select).siblings().removeClass(select); 97 that.find(con).eq(i).addClass(show).siblings().removeClass(show); 98 }) 99 }, 100 }) 101 102 103 $('#tab').Tab('#con span','select','#list li','lis'); 104 $('#tab1').Tab('#con span','select','#list li','lis'); 105 }) 106 </script> 107 </body> 108 </html>
