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 }

 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>    

 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     });