通过jq封装的方法,可以更简单的制作一个选项卡
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <script type="text/javascript" src="js/jquery-1.12.4.js"></script> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 #btn ul { 15 width: 300px; 16 height: 50px; 17 margin: 50px; 18 } 19 20 .on { 21 color: red; 22 } 23 24 #btn ul li { 25 list-style-type: none; 26 width: 50px; 27 height: 50px; 28 margin-left: 10px; 29 background: gray; 30 float: left; 31 line-height: 50px; 32 text-align: center; 33 cursor: pointer; 34 } 35 </style> 36 </head> 37 38 <body> 39 <div id="btn"> 40 <ul> 41 <li>1</li> 42 <li>2</li> 43 <li>3</li> 44 </ul> 45 </div> 46 47 <div> 48 <div id="jq1"></div> 49 <div class="jq2"></div> 50 <div id="jq3"></div> 51 </div> 52 53 54 55 56 <script> 57 58 //通过jq来设置三个要div 59 $(".jq2")[0].style.width = "100px"; 60 $(".jq2")[0].style.height = "100px"; 61 $(".jq2")[0].style.background = "blue"; 62 63 $("#jq1")[0].style.width = "100px"; 64 $("#jq1")[0].style.height = "100px"; 65 $("#jq1")[0].style.background = "red"; 66 67 $("#jq3")[0].style.width = "100px"; 68 $("#jq3")[0].style.height = "100px"; 69 $("#jq3")[0].style.background = "green"; 70 71 //定义一个变量aLi用于存放btn下面的li,方便使用 72 var aLi = $("#btn ul li"); 73 //通过hide()方法来设置三个div隐藏 74 $("div div").hide(); 75 //点击每一个li触发事件clik()方法，方法自带for循环 76 aLi.click(function() { 77 //把每个li通过index()方法所带序号存进一个变量中 78 var iNum = $(this).index(); 79 //addClass()方法是增加类名，removeClass()方法是移出类名 80 $(this).addClass("on").siblings().removeClass("on"); 81 //隐藏三个框，通过eq()方法选择显示当前li对应序号的框 82 $("div div").hide().eq(iNum).show(); 83 }) 84 </script> 85 </body> 86 87 </html>
载入外链jq，就可以开始写代码了