js常用特效——选项卡效果

 1 DOCTYPE html>
 2 html>
 3     head>
 4         meta charset="UTF-8">
 5         title>title>
 6         style type="text/css">
 7             *{
 8                 margin: 0px;
 9                 padding: 0px;
10                 list-style: none;
11             }
12             ol>li{
13                 width: 50px;
14                 height: 30px;
15                 text-align: center;
16                 line-height: 30px;
17                 color: red;
18                 background: #e0e0e0;
19                 display: inline-block;
20                 margin-right: 3px;
21                 font-weight: bold;
22                 cursor: pointer;
23             }
24             ul{
25                 margin: 100px 0px 0px 100px;
26                 position: relative;
27             }
28             ul>li{
29                 width: 300px;
30                 height: 200px;
31                 font-size: 40px;
32                 color: #fff;
33                 position: absolute;
34                 top: 0px;
35                 left: 0px;
36                 display: none;
37             }
38             ul>li:nth-of-type(1){
39                 background: #ff6700;
40             }
41             ul>li:nth-of-type(2){
42                 background: green;
43             }
44             ul>li:nth-of-type(3){
45                 background: blue;
46             }
47             .show{
48                 display: block;
49             }
50             .bg{
51                 background: #FF6700;
52                 color: white;
53             }
54         style>
55     head>
56     body>
57         ol id="ol">
58             li>1li>
59             li>2li>
60             li>3li>
61         ol>
62         ul id="ul">
63             li>Ali>
64             li>Bli>
65             li>Cli>
66         ul>
67         script type="text/javascript">
68             var li = document.querySelectorAll("ol li");
69             var lis = document.querySelectorAll("ul li");
70             
71             lis[0].className="show";
72             li[0].className = "bg";
73             for(var i=0;ili.length;i++){
74                 li[i].index = i;
75                 li[i].onmouseover = function(){
76                     clear();
77                     this.className = "bg";
78                     lis[this.index].className = "show";
79                 }
80             }
81             
82             function clear(){
83                 for(var j=0;jlis.length;j++){
84                     lis[j].className="";
85                     li[j].className="";
86                 }
87             }
88         script>
89     body>
90 html>