选项卡效果
例子一、
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>选项卡效果</title> 6 <script type="text/javascript" src="jquery.min.js"></script> 7 <style type="text/css"> 8 body{font-size:13px} 9 ul,li{margin:0;padding:0;list-style:none} 10 #menu li{text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer} 11 #menu li.tabFocus{width:50px;font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative} 12 #content{width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px} 13 #content li{display:none} 14 #content li.conFocus{display:block} 15 </style> 16 </head> 17 <body> 18 <ul id="menu"> 19 <li class="tabFocus">家居</li> 20 <li>电器</li> 21 <li>二手</li> 22 </ul> 23 <ul id="content"> 24 <li class="conFocus">这是家居的内容</li> 25 <li>这是电器的内容</li> 26 <li>这是家居的内容</li> 27 </ul> 28 <script type="text/javascript"> 29 $(function(){ 30 $('#menu li').each(function(index){ 31 $(this).click(function(){ 32 $('#menu li.tabFocus').removeClass('tabFocus'); 33 $(this).addClass('tabFocus'); 34 $('#content li:eq('+index+')').show().siblings().hide(); 35 }) 36 }); 37 }); 38 </script> 39 </body> 40 </html>
例子 二、
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 <script src="jquery.min.js"></script> 11 <style> 12 *{margin:0;padding:0;} 13 .tab{width:240px;margin:50px;} 14 .tab_menu { clear:both;} 15 .tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;} 16 .tab_menu li.hover { background:#DFDFDF;} 17 .tab_menu li.selected { color:#FFF; background:#6D84B4;} 18 .tab_box { clear:both; border:1px solid #898989; height:100px;} 19 .hide{display:none} 20 </style> 21 </head> 22 <body> 23 <div class="tab"> 24 <div class="tab_menu"> 25 <ul> 26 <li class="selected">时事</li> 27 <li>体育</li> 28 <li>娱乐</li> 29 </ul> 30 </div> 31 <div class="tab_box"> 32 <div>时事</div> 33 <div class="hide">体育</div> 34 <div class="hide">娱乐</div> 35 </div> 36 </div> 37 <script> 38 $(".tab_menu ul li").hover(function(){ 39 $(this).addClass("selected").siblings().removeClass("selected"); 40 var index=$(".tab_menu ul li").index(this) 41 $(".tab_box div").eq(index).show().siblings().hide(); 42 }) 43 </script> 44 </body> 45 </html>
