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

Posted 2020-09-27 web_study

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>1</li>
59             <li>2</li>
60             <li>3</li>
61         </ol>
62         <ul id="ul">
63             <li>A</li>
64             <li>B</li>
65             <li>C</li>
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;i<li.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;j<lis.length;j++){
84                     lis[j].className="";
85                     li[j].className="";
86                 }
87             }
88         </script>
89     </body>
90 </html>

以上是关于js常用特效——选项卡效果的主要内容，如果未能解决你的问题，请参考以下文章

原生JS实现各种经典网页特效——Banner图滚动选项卡切换广告弹窗等