jquer選項卡的制作
阿新 • • 發佈：2017-11-07
spa parent 內容 addclass n) 選擇 padding min child
選項卡的制作思想是先制作選項卡的結構和樣式，默認將某一個標題及與之相對應的內容設為選中狀態，當鼠標放置在某標題上時，首先清除掉所有標題和內容的默認樣式，將當前標題及與之相對應的內容設為選中樣式狀態。核心是選擇對應的標題與內容並對其進行設置。
所用的函數主要有:
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>
jquer選項卡的制作