jQuery-tab切换

来源：cnblogs　　作者：Tynam.Yang　　时间：2019/6/17 9:00:04　　对本文有异议
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Tab</title>
  8     <style>
  9     * {
 10         margin: 0;
 11         padding: 0
 12     }
 13 
 14     ul {
 15         list-style: none;
 16     }
 17 
 18     #contain {
 19         margin: 10px auto;
 20         width: 300px;
 21         height: 500px;
 22         border: solid rgb(224, 222, 222);
 23         border-radius: 10px;
 24         overflow: scroll;
 25     }
 26 
 27     #contain h4 {
 28         margin-top: 5px;
 29         text-align: center;
 30         height: 30px;
 31         line-height: 30px;
 32         border-bottom: solid rgb(240, 240, 240);
 33     }
 34 
 35     /* tab */
 36     #coupon>li {
 37         float: left;
 38         margin-top: 10px;
 39         display: inline-block;
 40         width: 100px;
 41         border: solid rgb(240, 240, 240);
 42         height: 30px;
 43         line-height: 30px;
 44         font-size: 12px;
 45         color: rgb(177, 175, 175);
 46         box-sizing:border-box;
 47         text-align: center;
 48     }
 49 
 50     #coupon>li:first-child {
 51         border-left: 0;
 52         border-right: 0;  
 53     }
 54 
 55     #coupon>li:last-child {
 56         border-left: 0;
 57         border-right: 0;  
 58     }
 59 
 60     #coupon .active {
 61         border: solid red;
 62         background: red;
 63         color: #fff;
 64     }
 65     
 66     /* 优惠券内容 */
 67     #coupon-contain {
 68         margin: 50px 5px;
 69     }
 70 
 71     #coupon-contain>div>div {
 72         margin: 10px 5px;
 73         text-align: center;
 74         height: 50px;
 75         line-height: 50px;
 76         border-radius: 8px; 
 77         background: rebeccapurple;
 78     }
 79 
 80     /* 隐藏所有优惠券 */
 81     #coupon-contain>div {
 82         display: none;
 83     }
 84 
 85     /* 显示class为show的元素 */
 86     #coupon-contain>.show {
 87         display: block;
 88     }
 89 
 90     #coupon-contain>div:first-child>div {
 91         background: green;
 92     }
 93  
 94     #coupon-contain>div:last-child>div {
 95         background: #333;
 96     }
 97     </style>
 98 
 99     <script src="jquery-3.4.1.js"></script>
100     <script>
101         $(function() {
102             var $coupon_tab =  $("#coupon>li");
103             var $coupon_contain = $('#coupon-contain>div');
104             var index = 0;
105 
106             $coupon_tab.click(function(){
107                 //移除tab中class的active属性
108                 $($coupon_tab[index]).removeClass('active');
109                 //移除优惠券中class的active属性
110                 $($coupon_contain[index]).removeClass('show');
111                 
112                 index = $(this).index();
113                 //添加tab中class的active属性
114                 $(this).addClass('active');
115                 //添加优惠券中class的active属性
116                 $($coupon_contain[index]).addClass('show');
117                 
118             });
119         });
120     </script>
121 </head>
122 <body>
123     <div id="contain">
124         <h4>优惠券</h4> 
125         <ul id="coupon">
126             <li class="active">未使用</li>
127             <li>已使用</li>
128             <li>已过期</li>
129         </ul>
130         <div id="coupon-contain">
131             <div id=“coupon-unused”  class="show">
132                 <div>未使用的优惠券</div>
133                 <div>未使用的优惠券</div>
134                 <div>未使用的优惠券</div>
135             </div>
136             <div id=“coupon-used” class="hide">
137                 <div>已使用的优惠券</div>
138                 <div>已使用的优惠券</div>
139                 <div>已使用的优惠券</div>
140                 <div>已使用的优惠券</div>
141             </div>
142             <div id=“coupon-expired” class="hide">
143                 <div>已过期的优惠券</div>
144                 <div>已过期的优惠券</div>
145                 <div>已过期的优惠券</div>
146             </div>
147         </div>  
148     </div>
149 </body>
150 </html>
效果图
原文链接：http://www.cnblogs.com/tynam/p/11029670.html
友情链接：直通硅谷　点职佳　北美留学生论坛
jQuery热门文章

jQuery推荐文章
