这次写words这个demo的时候用到一个导航想用tab标签加ajax实现，所以就写了一个tab标签：写的很简单，不过原理都实现了。写面贴出来一下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!doctype html> <head> <mete charset="utf-8"> <title >tab 标签 </title> <style> ul li { float: left; margin: 20px; } .box { width: 100px; height: 100px; display: none; border: 1px solid gray; } .show { display: block; } </style> </head> <body> <nav> <ul> <li>list0</li> <li>list1</li> <li>list2</li> <li>list3</li> </ul> </nav> <div class="wrap"> <div class="box show">000000000000000000</div> <div class="box">1111111111111111</div> <div class="box">222222222222222222</div> <div class="box">33333333333333</div> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> var li = $("nav li"); li.click(function(){ var boxInd = $(this).index(); $(".box").removeClass("show").eq(boxInd).addClass("show"); }); </script> </body> </html> |
其实道理却是很简单，就是找到当前点击的li的索引，然后显示box的这个索引让其显示。
两行代码实现tab标签