Jquery选项卡制作
1 <!doctype html> 2 2 <html> 3 3 <head> 4 4 <meta charset="utf-8"/> 5 5 <title>Jquery的select学习</title> 6 6 </head> 7 7 <style> 8 8 .select-tag{ 9 9 width: 500px; 10 10 height: 30px; 11 11 background-color:#000; 12 12 } 13 13 .select-tag ul li{ 14 14 float: left; 15 15 padding: 0 20px; 16 16 margin: 0 20px; 17 17 list-style:none; 18 18 color: #fff; 19 19 line-height: 30px; 20 20 } 21 21 .content{ 22 22 width: 498px; 23 23 height: 400px; 24 24 border:1px solid #ccc; 25 25 } 26 26 .select-tag .show-li{ 27 27 display: block; 28 28 background-color: #666; 29 29 } 30 30 .content div{display: none} 31 31 .content .show-con{ 32 32 display: block; 33 33 } 34 34 </style> 35 35 <script src="jquery-1.10.2.min.js" type="text/javascript"> 36 36 </script> 37 37 38 38 <body> 39 39 <div class="select-tag"> 40 40 <ul> 41 41 <li class="show-li">国内新闻</li> 42 42 <li>行业新闻</li> 43 43 <li>公司新闻</li> 44 44 </ul> 45 45 </div> 46 46 <div class="content"> 47 47 <div class="show-con"> 48 48 国内新闻 49 49 </div> 50 50 <div> 51 51 行业新闻 52 52 </div> 53 53 <div> 54 54 公司新闻 55 55 </div> 56 56 57 57 </div> 58 58 <script> 59 59 $(document).ready( 60 60 function(){ 61 61 var $div_li=$(".select-tag ul li"); /*获取选项卡的li*/ 62 62 $div_li.click(function(){ /*绑定单机时间*/ 63 63 $(this).addClass("show-li").siblings().removeClass("show-li"); /*点击的菜单添加class注意书写addClass且兄弟元素去除class*/ 64 64 var index=$div_li.index(this); /*创建元素全部在div_li的索引*/ 65 65 $(".content>div").eq(index).show().siblings().hide(); /*显示li元素对应的div元素隐藏其他同辈元素*/ 66 66 }); 67 67 68 68 } 69 69 70 70 ) 71 71 </script> 72 72 </body> 73 73 </html>
if you don't try,you will never know!
