选项卡 

 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>

 

posted @ 2021-11-05 17:24  小小不小阿  阅读(24)  评论(0)    收藏  举报