1
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
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
