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 <title>Document</title>
7 <style>
8 *{
9 margin: 0;
10 padding: 0;
11 }
12 a{
13 text-decoration: none;
14 color: oldlace;
15
16 }
17 ul li{
18 display: inline-block;
19 height: 20px;
20 width: 60px;
21 }
22 ul li a{
23 display: block;
24 text-align: center;
25 background-color: tomato;
26 }
27 .active{
28 background-color: palegreen;
29 }
30 .content{
31 width: 186px;
32 height: 200px;
33 border: 1px solid indianred;
34 }
35 </style>
36 <script>
37 window.onload = function(){
38 var as = document.querySelectorAll("li a");
39 for (var i = 0; i < as.length; i++) {
40 as[i].onclick = function(){
41 for (var j = 0; j < as.length; j++) {
42 as[j].className="";
43
44 }
45 this.className="active";
46
47 //ajax
48 var url=this.attributes["data-url"].value;
49 }
50
51 }
52 }
53 </script>
54 </head>
55
56 <body>
57 <ul>
58 <li><a href="#" class="active"data-url="http://a">列表1</a></li>
59 <li><a href="#"data-url="http://b">列表2</a></li>
60 <li><a href="#"data-url="http://c">列表3</a></li>
61 </ul>
62 <div class="content">
63
64 </div>
65 </body>
66 </html>
