网页中经常会用到选项卡这种东东,说白了就是点击一个选项,下面会弹出这个选项里的内容。
方法一:
方法一利用简单的代码即可实现,以下是全部的代码;
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡</title> <style type="text/css"> *{margin: 0;padding: 0;} #box{width: 600px;background: #ccc;margin: 0 auto;} li{list-style: none;} #ul1{display: block; width: 100%;overflow: hidden;} #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;} #content{width: 100%;margin-top: 20px;} #content div{display: none;} #content div.active{display: block;} .show{background: red;} </style> </head> <body> <div id="box"> <ul id="ul1"> <li>首页</li> <li>产品</li> <li>新闻</li> <li>联系</li> <li>我的</li> </ul> <div id="content"> <div class="active"> <ul> <li>new1</li> <li>new2</li> <li>new3</li> </ul> </div> <div> <ul> <li>new4</li> <li>new5</li> <li>new6</li> </ul> </div> <div> <ul> <li>new7</li> <li>new8</li> <li>new9</li> </ul> </div> <div> <ul> <li>new10</li> <li>new11</li> <li>new12</li> </ul> </div> <div> <ul> <li>new13</li> <li>new14</li> <li>new15</li> </ul> </div> </div> </div> <script type="text/javascript"> window.onload=function(){ var oli=document.getElementById("ul1").getElementsByTagName("li"); //alert(oli.length); var odiv=document.getElementById("content").getElementsByTagName("div"); //alert(odiv.length) for(var i=0;i<oli.length;i++){ oli[i]._index=i; oli[i].onclick=function(){ //alert(i); for(i=0;i<oli.length;i++){ oli[i].className=''; odiv[i].style.display='none'; } this.className='show'; odiv[this._index].style.display='block'; } } } </script> </body> </html>
首先我们在HTML部分定义网页选项卡中的内容。
<div id="box"> <ul id="ul1"><!--选项卡中的点击部分--> <li>首页</li> <li>产品</li> <li>新闻</li> <li>联系</li> <li>我的</li> </ul> <div id="content"> <div class="active"><!--选项卡中要显示和被显示的部分--> <ul> <li>new1</li> <li>new2</li> <li>new3</li> </ul> </div> <div> <ul> <li>new4</li> <li>new5</li> <li>new6</li> </ul> </div> <div> <ul> <li>new7</li> <li>new8</li> <li>new9</li> </ul> </div> <div> <ul> <li>new10</li> <li>new11</li> <li>new12</li> </ul> </div> <div> <ul> <li>new13</li> <li>new14</li> <li>new15</li> </ul> </div> </div> </div>
CSS部分对HTML中的内容进行修饰:
<style type="text/css"> *{margin: 0;padding: 0;} #box{width: 600px;background: #ccc;margin: 0 auto;} li{list-style: none;} #ul1{display: block; width: 100%;overflow: hidden;} #ul1 li{width:110px;height: 40px;background: #4cfed2;float: left;margin-left: 8px;text-align: center;line-height: 40px;} #content{width: 100%;margin-top: 20px;} #content div{display: none;} #content div.active{display: block;} .show{background: red;} </style>
最后是最重要的js部分:
<script type="text/javascript"> window.onload=function(){ var oli=document.getElementById("ul1").getElementsByTagName("li"); //alert(oli.length); var odiv=document.getElementById("content").getElementsByTagName("div");//提取HTML中的元素 //alert(odiv.length) for(var i=0;i<oli.length;i++){ oli[i]._index=i; oli[i].onclick=function(){ //alert(i); for(i=0;i<oli.length;i++){ oli[i].className=''; odiv[i].style.display='none'; } this.className='show'; odiv[this._index].style.display='block'; } } } </script>
JS语句中的第一个for循环是为了取得所有的选项卡中的点击部分;因为I这个变量在下面的事件函数中无法访问到,所以每次点击时,i变量循环到oli.length值。因此将i的值交给一个我们自定义的元素属性上来保存循环中i的值,供下面使用。即:oli[i]._index=i;
添加点击函数后,第二个for循环是为了把所有的oli的className改为“空”和所有的odiv的style为display='none';循环结束后,在给当前点击的这个oli添加className和下面相应的odiv的style为display='block';
以下是运行的结果:
在编写程序时一定要注意,选项卡中的点击部分即:li的数量(JS里oli.length)要和下面ID为content的div里包含的div数量(JS里odiv.length)相同,我在编写程序时就因为oli.length与odiv.length不相等,导致程序报错,但是好长时间都找不到错误;总而言之还是要多多细心。
方法二:
方法一适用于选项卡比较少的情况,但如果选项卡内容较多时我们要用到这种方法,第二种方法运用到了这周我们老师讲的一个在JS种比较重要的知识点:自运行函数
(function a(){ //函数里的内容 })(参数);
定义函数a();给整个函数带上括号,后面的括号为输入参数;
以下为方法二自运行函数的程序:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>多个tab选项卡</title> <script> window.onload = function() { tab("tabMain", "click"); tab("tabMain1", "click"); tab("tabMain2", "click"); tab("tabMain4", "click"); function tab(id, event) { var oDiv = document.getElementById(id); var oBtn = oDiv.getElementsByTagName("li"); var oBox = oDiv.getElementsByTagName("div"); for(var i = 0; i < oBtn.length; i++) { //console.log(i) (function(index) {//自执行函数 oBtn[index].addEventListener(event, function() { for(var i = 0; i < oBtn.length; i++) { oBtn[i].className = ''; oBox[i].className = 'tabSide'; } this.className = 'active'; oBox[index].className = 'active'; });//添加事件监听 })(i) } } } </script> <style> * { padding: 0; margin: 0; list-style: none; } .tabMenu { width: 300px; margin: 50px auto 0 auto; } .tabMenu ul { display: block; overflow: hidden; width: 300px; height: 40px; background: #eee; } .tabMenu ul li { cursor: pointer; display: block; float: left; width: 100px; text-align: center; height: 40px; line-height: 40px; font-size: 16px; } .tabMenu ul li.active { background: #f00; color: #fff; } .tabMenu .tabSide { display: none; padding: 10px; line-height: 20px; width: 278px; border: solid 1px #eee; } .tabMenu div.active { display: block; padding: 10px; line-height: 20px; width: 278px; border: solid 1px #eee; } </style> </head> <body> <div id="tabMain" class="tabMenu"> <ul> <li class="active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="tabSide active">内容1</div> <div class="tabSide">内容2</div> <div class="tabSide">内容3</div> </div> <div id="tabMain1" class="tabMenu"> <ul> <li class="active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="tabSide active">内容1</div> <div class="tabSide">内容2</div> <div class="tabSide">内容3</div> </div> <div id="tabMain2" class="tabMenu"> <ul> <li class="active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="tabSide active">内容1</div> <div class="tabSide">内容2</div> <div class="tabSide">内容3</div> </div> <div id="tabMain4" class="tabMenu"> <ul> <li class="active">tab1</li> <li>tab2</li> <li>tab3</li> </ul> <div class="tabSide active">内容1</div> <div class="tabSide">内容2</div> <div class="tabSide">内容3</div> </div> </body> </html>
和方法一相似先写HTML里的内容,CSS部分对HTML进行修饰,我们直接来看JS部分;
<script> window.onload = function() { tab("tabMain", "click"); tab("tabMain1", "click"); tab("tabMain2", "click"); tab("tabMain4", "click"); function tab(id, event) { var oDiv = document.getElementById(id); var oBtn = oDiv.getElementsByTagName("li"); var oBox = oDiv.getElementsByTagName("div"); for(var i = 0; i < oBtn.length; i++) { //alert(i); (function(index) {//自执行函数 oBtn[index].addEventListener(event, function() { for(var i = 0; i < oBtn.length; i++) { oBtn[i].className = ''; oBox[i].className = 'tabSide'; } this.className = 'active'; oBox[index].className = 'active'; });//添加事件监听 })(i) } } } </script>
通过添加事件和自运行函数完成多个选项卡。
本文向大家介绍js选项卡的实现方法,包括了js选项卡的实现方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js选项卡的实现方法。分享给大家供大家参考。具体分析如下: 一、思路 1. 获取元素; 2. for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件; 3. 点击当前按钮时会以高亮状态显示,通过for循环历遍把所有的按钮样式设置为空在把所有div的d
本文向大家介绍浅析js实现网页截图的两种方式,包括了浅析js实现网页截图的两种方式的使用技巧和注意事项,需要的朋友参考一下 Web端的截图(生成图片)并不算是个高频的需求,资料自然也不算多,查来查去,也不过Canvas 和 SVG两种实现方案,原理大概相似,都非真正义上的截图而是把DOM转为图片,然而实现方式却截然不同。 Canvas 实现 如何将dom转换成canvas图片?自然是要一点点画到c
本文向大家介绍Android基于ViewPager Fragment实现选项卡,包括了Android基于ViewPager Fragment实现选项卡的使用技巧和注意事项,需要的朋友参考一下 先给大家展示效果图: 1.新建TestFragmen继承Fragment 2.MyFragmentPagerAdapter继承FragmentPagerAdapter 3.MainActivity 要继承Fr
本文向大家介绍JS实现完全语义化的网页选项卡效果代码,包括了JS实现完全语义化的网页选项卡效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS实现完全语义化的网页选项卡效果代码。分享给大家供大家参考。具体如下: 这是一款完全语义化的JS网页选项卡,包括了两种用法,一种是点击式,另一种是滑动门式,具体用哪一种要根据你自己的需要了,滑动门是在鼠标经过时触发,选项卡则是需要鼠标点击的。
本文向大家介绍js实现抽奖的两种方法,包括了js实现抽奖的两种方法的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了js实现抽奖的具体代码,供大家参考,具体内容如下 抽奖活动的原理还是很简单的,通过代码一目了然,如果看不懂就私聊我,可以私下交流! 方法一:使用table写一个随机抽奖 这是html+js代码 方法二:使用span标签写 html+js代码如下 两个页面的css代码 以上
本文向大家介绍js简单实现竖向tab选项卡的方法,包括了js简单实现竖向tab选项卡的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了js简单实现竖向tab选项卡的方法。分享给大家供大家参考。具体如下: 选项卡占据左边,而内容放在右边,一个适合新手的竖向的tab选项卡特效例子 希望本文所述对大家的javascript程序设计有所帮助。