JavaScriptfor循环-小案例：选项卡伸缩导航

Posted dqy95

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScriptfor循环-小案例：选项卡伸缩导航相关的知识，希望对你有一定的参考价值。

这两天学习js的for循环，做了一些小案例，总结来说：
  • 用设置class来改变元素的样式以及是否显示;
  • 用for循环给多个元素添加注册事件;
  • 注意自定义属性的使用：O[i].index = i;
  • 以及用变量num来记录当前状态或者序号。

案例1：选项卡

效果：

 

代码：

  1 <!doctype html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <meta name="Keywords" content="JS-案例">
  6         <meta name="Description" content="JS-案例选项卡">
  7         <title>JS-选项卡</title>
  8         <style>
  9             body,p,ul{margin: 0;padding: 0;}
 10             ul{list-style: none;}
 11             img{border: 0; vertical-align: middle;}
 12             .wrap{
 13                 position: relative;
 14                 width: 350px;
 15                 height: 580px;
 16                 margin: 50px auto;
 17             }
 18             .wrap .img{
 19                 position: relative;
 20                 width: 326px;
 21                 height: 580px;
 22             }
 23             .wrap .img img{
 24                 display: none;
 25                 position: absolute;
 26                 top: 0;
 27                 left: 0;
 28             }
 29             .wrap .img img.active{
 30                 display: block;
 31             }
 32             .wrap .img p{
 33                 position: absolute;
 34                 bottom: 0;
 35                 left: 0;
 36                 width: 100%;
 37                 height: 30px;
 38                 background-color: rgba(0,0,0,.3);
 39                 line-height: 30px;
 40                 text-align: center;
 41                 font-size: 16px;
 42                 color: #fff;
 43                 z-index: 3;
 44             }
 45             .wrap .btn{
 46                 position: absolute;
 47                 top: 0;
 48                 right: 0;
 49             }
 50             .wrap .btn li{
 51                 width: 24px;
 52                 height: 24px;
 53                 margin-bottom: 10px;
 54                 background-color: #000;
 55                 color: #fff;
 56                 font-size: 12px;
 57                 line-height: 24px;
 58                 text-align: center;
 59                 cursor: pointer;
 60             }
 61             .wrap .btn li:hover{
 62                 background-color: orange; 
 63             }
 64             .wrap .btn li.active{
 65                 background-color: orange;
 66             }
 67         </style>
 68     </head>
 69     <body>
 70         <div class="wrap">
 71             <div class="img">
 72                 <img class="active" src="images/g1.jpg" alt="img">
 73                 <img src="images/g2.jpg" alt="img">
 74                 <img src="images/g3.jpg" alt="img">
 75                 <img src="images/g4.jpg" alt="img">
 76                 <p><span id="num">1</span>/4</p>
 77             </div>
 78             <ul class="btn">
 79                 <li class="active">1</li>
 80                 <li>2</li>
 81                 <li>3</li>
 82                 <li>4</li>
 83             </ul>
 84         </div>
 85         <script>
 86             var Obtn = document.getElementsByClassName("btn")[0].getElementsByTagName("li");
 87             var Oimg = document.getElementsByClassName("img")[0].getElementsByTagName("img");
 88             var Ospan = document.getElementById("num");
 89 
 90             var index = 0;//这个变量用来存储当前显示的序号
 91 
 92             for(var i=0; i<Obtn.length; i++){
 93                 Obtn[i].i = i;//自定义属性，用来存每个人的序号
 94                 Obtn[i].onclick = function(){
 95                     Oimg[index].className = "";//把前一个的名字去掉
 96                     Obtn[index].className = "";//把前一图片的名字去掉
 97 
 98                     index = this.i;//把序号变成当前点击的这个的序号
 99 
100                     Obtn[index].className = "active";//给点击的这个btn加名字
101                     Oimg[index].className = "active";//给当前要显示的图片加名字        
102 
103                     Ospan.innerHTML = this.i+1;//显示当前图片序号                    
104                 }
105             }
106         </script>
107     </body>
108 </html>
View Code

 案例2：伸缩导航

效果：

 

代码：

 1 <!doctype html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta name="Keywords" content="JS-案例">
 6         <meta name="Description" content="JS-案例伸缩导航">
 7         <title>JS-伸缩导航</title>
 8         <style>
 9             body,p,ul{margin: 0; padding: 0;}
10             ul{list-style: none;}
11             #tab{
12                 width: 150px;
13                 margin: 0 auto;
14                 border: 1px dashed pink;
15             }
16             #tab p{
17                 height: 30px;
18                 padding: 5px;
19                 background-color: #000;
20                 border-bottom: 1px solid pink;
21                 line-height: 30px;
22                 font-size: 14px;
23                 color: #fff;
24                 cursor: pointer;
25             }
26             #tab div.active p{
27                 background: pink;
28             }
29             #tab div ul{
30                 display: none;
31             }
32             #tab div.active ul{
33                 display: block;
34             }
35             #tab ul li {
36                 height: 30px;
37                 padding: 0 5px;
38                 border-bottom: 1px solid #eee;
39                 font-size: 12px;
40                 line-height: 30px;
41                 color: #000;
42                 cursor: pointer;
43             }
44         </style>
45     </head>
46     <body>
47         <div id="tab">
48             <div>
49                 <p>new</p>
50                 <ul>
51                     <li>new1</li>
52                     <li>new2</li>
53                     <li>new3</li>
54                 </ul>
55             </div>
56             <div>
57                 <p>old以上是关于JavaScriptfor循环-小案例：选项卡伸缩导航的主要内容，如果未能解决你的问题，请参考以下文章
 

 js学习总结----经典小案例之选项卡


 js - 面向对象 - 小案例：轮播图随机点名选项卡鼠标拖拽


 选项卡的简单原理实现


 如何在 VC2013 for C++ 中关闭自动选项卡开关/案例？


 h5-伸缩布局-小案例


 HTML / CSS - 在导航中的活动选项卡底部添加一个小三角形或箭头