选项卡的制作思想是先制作选项卡的结构和样式，默认将某一个标题及与之相对应的内容设为选中状态，当鼠标放置在某标题上时，首先清除掉所有标题和内容的默认样式，将当前标题及与之相对应的内容设为选中样式状态。核心是选择对应的标题与内容并对其进行设置。
所用的函数主要有:
1.index()函数
$("xxx").index();搜索匹配的元素，并返回相对应元素的索引值，从0开始计数。
<ul> <li><span>one</span></li> <li><span>two</span></li> <li><span>three</span></li> <li><span>four</span></li> <li><span>five</span></li> </ul>
var action=$("ul>li").index(2);
console.log(action);
输出：3
2.eq()函数
$("xxx").eq(N);表示获取第N个元素，这个元素从0开始计数。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>制作选项卡</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 .listbox{ 12 width: 300px; 13 margin:0 auto; 14 padding: 10px 0; 15 height:22px; 16 } 17 #choose>ul>li{ 18 width:90px; 19 float: left; 20 list-style:none; 21 text-align: center; 22 } 23 #choose>ul>li{ 24 border-left:3px solid #fff; 25 cursor: pointer; 26 } 27 div{ 28 clear: both; 29 } 30 #choose{ 31 width: 800px; 32 margin:0 auto; 33 height:600px; 34 background-color: darkcyan; 35 } 36 .choice{ 37 color: #fff; 38 background-color:lightsteelblue; 39 } 40 .show{ 41 display: block; 42 } 43 .hide{ 44 display: none; 45 } 46 </style> 47 </head> 48 <body> 49 50 <div id="choose"> 51 <!--标题部分--> 52 <ul class="listbox"> 53 <li class="choice"> 54 <span>Menu1</span> 55 </li> 56 <li> 57 <span>Menu2</span> 58 </li> 59 <li> 60 <span>Menu3</span> 61 </li> 62 </ul> 63 <!--内容部分--> 64 <div class="nr show"> 65 这里试内容一 66 </div> 67 <div class="nr hide"> 68 这里试内容二 69 </div> 70 <div class="nr hide"> 71 这里试内容三 72 </div> 73 <p>one</p> 74 <p>two</p> 75 <p>three</p> 76 </div> 77 <script src="js/jquery-3.2.1.min.js"></script> 78 <script> 79 $(document).ready(function(){ 80 $(".listbox>li").click(function () { 81 $(this).parent().children("li").removeClass("choice"); 82 $(this).addClass("choice"); 83 var now=$(this).index(); 84 console.log(now); 85 $(this).parent().parent().children(".nr").hide(); 86 $(this).parent().parent().children(".nr").eq(now).show(); 89 }); 90 }); 91 </script> 92 93 94 95 96 </body> 97 </html>