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>Document</title> 8 <link rel="stylesheet" href="css/main.css"> 9 <script src="js/jquery-1.12.4.min.js"></script> 10 <script> 11 $(function(){ 12 13 $('.tab_btns input').click(function(){ 14 15 $(this).addClass('current').siblings().removeClass('current'); 16 $('.tab_cons').animate({'left':-$(this).index()*500}); 17 18 }) 19 20 }) 21 22 23 </script> 24</head> 25<body> 26 <div class="tab_wrap"> 27 <div class="tab_btns"> 28 <input type="button" value="公司新闻" class="current"> 29 <input type="button" value="国际新闻"> 30 <input type="button" value="行业动态"> 31 </div> 32 <div class="tab_cons"> 33 <ul> 34 <li><a href="#">公司新闻G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li> 35 <li><a href="#">帕楚利亚谈与香珀特冲突：就是普通争球而已</a><span>06-11 18:25</span></li> 36 <li><a href="#">两战78分！詹皇狂赞欧文：他注定为大场面而生</a><span>06-11 18:23</span></li> 37 <li><a href="#">利文斯顿：冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li> 38 <li><a href="#">球鞋收入榜：詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li> 39 <li><a href="#">科勒称若有G6会再去现场 小范：人们应向她道歉</a><span>06-11 09:56</span></li> 40 </ul> 41 <ul> 42 <li><a href="#">国际新闻G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li> 43 <li><a href="#">帕楚利亚谈与香珀特冲突：就是普通争球而已</a><span>06-11 18:25</span></li> 44 <li><a href="#">两战78分！詹皇狂赞欧文：他注定为大场面而生</a><span>06-11 18:23</span></li> 45 <li><a href="#">利文斯顿：冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li> 46 <li><a href="#">球鞋收入榜：詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li> 47 <li><a href="#">科勒称若有G6会再去现场 小范：人们应向她道歉</a><span>06-11 09:56</span></li> 48 </ul> 49 <ul> 50 <li><a href="#">行业动态G5将现场观战 网友调侃詹杜争吵为发际线</a><span>06-11 20:39</span></li> 51 <li><a href="#">帕楚利亚谈与香珀特冲突：就是普通争球而已</a><span>06-11 18:25</span></li> 52 <li><a href="#">两战78分！詹皇狂赞欧文：他注定为大场面而生</a><span>06-11 18:23</span></li> 53 <li><a href="#">利文斯顿：冲突很常见 注意力要放在比赛中</a><span>06-11 18:10</span></li> 54 <li><a href="#">球鞋收入榜：詹皇仅乔丹1/3 哈登第5库里第6</a><span>06-11 16:42</span></li> 55 <li><a href="#">科勒称若有G6会再去现场 小范：人们应向她道歉</a><span>06-11 09:56</span></li> 56 </ul> 57 </div> 58 </div> 59</body> 60</html>
HTML代码：
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>Document</title> 8 <link rel="stylesheet" href="css/main.css"> 9 <script src="js/jquery-1.12.4.min.js"></script> 10 <script> 11 $(function(){ 12 var $pop_con = $('.pop_main'); 13 var $pop = $('.pop_con'); 14 var iTop = $pop.css('top'); 15 16 $('#btn').click(function(){ 17 $pop_con.show(); 18 $pop.css({'opacity':0,'top':0}); 19 $pop.animate({'opacity':1,'top':iTop}); 20 }); 21 22 $('.pop_title a,.cancel').click(function(){ 23 $pop.animate({'opacity':0,'top':0},function(){ 24 $pop_con.hide(); 25 }); 26 }); 27 28 }) 29 30 </script> 31</head> 32<body> 33 <input type="button" value="弹出弹框" id="btn"> 34 <div class="pop_main"> 35 <div class="pop_con"> 36 <div class="pop_title"> 37 <h3>系统提示</h3> 38 <a href="#">×</a> 39 </div> 40 <div class="pop_detail"> 41 <p class="pop_text">亲！确定要这么做吗？</p> 42 </div> 43 <div class="pop_footer"> 44 <input type="button" value="取 消" class="cancel"> 45 <input type="button" value="确 定" class="confirm"> 46 </div> 47 </div> 48 <div class="mask"></div> 49 </div> 50</body> 51</html>
css代码：
1body,ul{ 2 margin:0px; 3 padding:0px; 4} 5ul{ 6 list-style:none; 7} 8 9a{ 10 text-decoration:none; 11} 12 13.tab_wrap{ 14 width:500px; 15 height:300px; 16 margin:50px auto 0; 17 overflow:hidden; 18 position:relative; 19} 20 21.tab_btns{ 22 height:50px; 23} 24.tab_btns input{ 25 width:100px; 26 height:50px; 27 border:0px; 28 background:#ddd; 29 font-size:14px; 30 outline:none; 31} 32.tab_btns .current{ 33 background:gold; 34} 35.tab_cons{ 36 height:250px; 37 width:1500px; 38 background:gold; 39 position:absolute; 40 left:0px; 41 top:50px; 42} 43 44.tab_cons ul{ 45 width:500px; 46 height:235px; 47 float:left; 48 padding-top:15px; 49} 50 51.tab_cons ul li{ 52 line-height:30px; 53 margin:5px 20px; 54 overflow:hidden; 55} 56 57.tab_cons ul a{ 58 font-size:14px; 59 color:#333; 60 float:left; 61} 62 63.tab_cons ul span{ 64 font-size:14px; 65 color:#666; 66 float:right; 67} 68 69.pop_main{ 70 display:none; 71} 72 73.pop_con{ 74 width:500px; 75 height:300px; 76 background:#fff; 77 border-radius:4px; 78 position:fixed; 79 left:50%; 80 top:50%; 81 margin-left:-250px; 82 margin-top:-150px; 83 border:1px solid #f0f0f0; 84 z-index:9999; 85} 86.pop_title{ 87 width:490px; 88 height:40px; 89 background:#157bef; 90 margin:5px auto 0; 91 border-radius:6px; 92} 93.pop_title h3{ 94 float:left; 95 margin:0px; 96 margin-left:10px; 97 line-height:40px; 98 color:#fff; 99 font-size:18px; 100 font-weight:normal; 101} 102.pop_title a{ 103 float:right; 104 width:20px; 105 height:20px; 106 background:#fff; 107 margin:10px 10px 0 0; 108 text-decoration:none; 109 line-height:20px; 110 text-align:center; 111 font-size:20px; 112 border-radius:4px; 113} 114.pop_detail{ 115 height:200px; 116 border-bottom:1px solid #f0f0f0; 117 /* 解决margin-top塌陷 */ 118 overflow:hidden; 119} 120 121.pop_footer{ 122 height:54px; 123} 124.pop_footer .confirm,.pop_footer .cancel{ 125 float:right; 126 width:100px; 127 height:36px; 128 background:#157bef; 129 border:0px; 130 color:#fff; 131 font-size:16px; 132 border-radius:4px; 133 margin:9px 10px 0 0; 134} 135.pop_footer .cancel{ 136 background:#ddd; 137 color:#666; 138 margin-right:20px; 139} 140.mask{ 141 width:100%; 142 height:100%; 143 background:#000; 144 position:fixed; 145 left:0; 146 top:0; 147 opacity:0.3; 148 filter:alpha(opacity=30); 149 z-index:9990; 150} 151.pop_text{ 152 margin:74px 0 0 100px; 153 font-size:20px; 154 color:#666; 155}
注意用的所有的jQuery都是1.12.4
