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

最新推荐文章于 2024-08-26 11:12:18 发布

weixin_30379531

最新推荐文章于 2024-08-26 11:12:18 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/web-wjg/p/7136773.html

版权

本文通过一个具体的示例展示了如何使用CSS设置网页样式，并借助JavaScript实现元素间的交互效果。该示例包括了基本的HTML结构，定义了特定样式的CSS规则，以及用于响应鼠标悬停事件的JavaScript代码。

摘要由CSDN通过智能技术生成

 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>