选项卡
选项卡是比较大众的，但是用到的地方特别多，所以我今天也做了一下这个东西，欢迎补足！
首先是样式部分
1 .xuanxiangka{ 2 width:451px; 3 height:403px; 4 margin-right:18.7px; 5 float:left; 6 } 7 .xuanxiangka>ul>li{ 8 width:34px; 9 height:25px; 10 line-height:25px; 11 padding:0px 15px; 12 margin-top:18px; 13 position:relative; /*定位的效果附图*/ 14 top:1px; 15 left:0px; 16 border-right:1px solid #EAEAEA; 17 border-top:1px solid #EAEAEA; 18 border-bottom:1px solid #EAEAEA; 19 background:#F8F8F8; 20 float:left; 21 font-size:14px; 22 } 23 .xuanxiangka>ul>li:nth-child(1){ 24 border-left:1px solid #EAEAEA; 25 } 26 /*初始显示的状态*/ 27 .xuanxiangka>ul>li:nth-child(1){ 28 background:white; 29 border-bottom:1px solid #FFF; 30 } 31 .xuanxiangka>ul>li:nth-child(1) a{ 32 color:#C54747; 33 } 34 35 .xuanxiangka_content{ 36 width:409px; 37 min-height:100px; /*给定最小高度的效果附图*/ 38 padding:20px 20px; 39 margin-top:18px; 40 border:1px solid #EAEAEA; 41 clear:left; 42 } 43 .xuanxiangka_content li{ 44 display:none; 45 } 46 /*初始显示的状态*/ 47 .xuanxiangka_content>ul>.show{ 48 display:block; 49 }
然后主体部分HTML代码
1 <!--选项卡--> 2 <div style="margin:0px auto"> 3 <div class="xuanxiangka"> 4 <!--用来控制的ul--> 5 <ul> 6 <li><a href="#1">TAB1</a></li> 7 <li><a href="#1">TAB2</a></li> 8 <li><a href="#1">TAB3</a></li> 9 </ul> 10 <div class="xuanxiangka_content"> 11 <ul> 12 <li class="show"> 13 <p> 14 采采卷耳，不盈顷筐。嗟我怀人，置彼周行。 15 16 陟彼崔嵬，我马虺隤。我姑酌彼金罍，维以不永怀。 17 18 陟彼高冈，我马玄黄。我姑酌彼兕觥，维以不永伤。 19 20 陟彼砠矣，我马瘏矣，我仆痡矣，云何吁矣。 21 </p> 22 <p> 23 采采卷耳，不盈顷筐。嗟我怀人，置彼周行。 24 25 陟彼崔嵬，我马虺隤。我姑酌彼金罍，维以不永怀。 26 27 陟彼高冈，我马玄黄。我姑酌彼兕觥，维以不永伤。 28 29 陟彼砠矣，我马瘏矣，我仆痡矣，云何吁矣。 30 </p> 31 </li> 32 <li> 33 <p> 34 采采卷耳，不盈顷筐。嗟我怀人，置彼周行。 35 36 陟彼崔嵬，我马虺隤。我姑酌彼金罍，维以不永怀。 37 38 陟彼高冈，我马玄黄。我姑酌彼兕觥，维以不永伤。 39 40 陟彼砠矣，我马瘏矣，我仆痡矣，云何吁矣。 41 </p> 42 </li> 43 <li> 44 <p> 45 采采卷耳，不盈顷筐。嗟我怀人，置彼周行。 46 47 陟彼崔嵬，我马虺隤。我姑酌彼金罍，维以不永怀。 48 49 陟彼高冈，我马玄黄。我姑酌彼兕觥，维以不永伤。 50 51 陟彼砠矣，我马瘏矣，我仆痡矣，云何吁矣。 52 </p> 53 </li> 54 </ul> 55 </div> 56 </div> 57 </div>
最后就是jQuery部分啦
1 $(".xuanxiangka>ul>li").click(function(){ 2 var i=$(this).index(); 3 $(this).css({ 4 'background':'white', 5 'border-bottom':'1px solid #FFF' 6 }); 7 $(this).siblings().css({ 8 'background':'#F8F8F8', 9 'border-bottom':'1px solid #EAEAEA' 10 }); 11 //字体颜色 12 $(".xuanxiangka a").css({ 13 'color':'#000' 14 }); 15 $(".xuanxiangka a").eq(i).css({ 16 'color':'#C54747' 17 }); 18 //显示部分 19 $('.xuanxiangka_content>ul>li').eq(i).show(); 20 $('.xuanxiangka_content>ul>li').eq(i).siblings().hide(); 21 });
样式里面有两个我很喜欢的亮点
1.定位
如图，其实就是为了选项卡美观一些啦，因为上边的ul往下面移动了1px的距离，点击li的时候添加了1px宽度的白色下边框遮住了下面的ul，于是就出现了这个效果啦
2.内容高度
发现了吗？高度变了哦，因为给了最小高度所以会有内容撑开了，有木有很神奇啊
