网站优化

婚庆微信小程序开发_基于JS完成网页中的选项卡

作者:admin 发布时间:2021-01-11
基于JS实现网页中的选项卡(两种方法)       这篇文章主要介绍了用js语句实现网页中的选项卡(两种方法),非常不错,具有参考借鉴价值,需要的朋友可以参考下

网页中经常会用到选项卡这种东东,说白了就是点击一个选项,下面会弹出这个选项里的内容。

方法一:

方法一利用简单的代码即可实现,以下是全部的代码;

 !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 
 li new1 /li 
 li new2 /li 
 li new3 /li 
 /ul 
 /div 
 div 
 li new4 /li 
 li new5 /li 
 li new6 /li 
 /ul 
 /div 
 div 
 li new7 /li 
 li new8 /li 
 li new9 /li 
 /ul 
 /div 
 div 
 li new10 /li 
 li new11 /li 
 li new12 /li 
 /ul 
 /div 
 div 
 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]. unction(){
 //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 !--选项卡中要显示和被显示的部分-- 
 li new1 /li 
 li new2 /li 
 li new3 /li 
 /ul 
 /div 
 div 
 li new4 /li 
 li new5 /li 
 li new6 /li 
 /ul 
 /div 
 div 
 li new7 /li 
 li new8 /li 
 li new9 /li 
 /ul 
 /div 
 div 
 li new10 /li 
 li new11 /li 
 li new12 /li 
 /ul 
 /div 
 div 
 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]. unction(){
 //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" 
 li tab1 /li 
 li tab2 /li 
 li tab3 /li 
 /ul 
 div 内容1 /div 
 div 内容2 /div 
 div 内容3 /div 
 /div 
 div id="tabMain1" 
 li tab1 /li 
 li tab2 /li 
 li tab3 /li 
 /ul 
 div 内容1 /div 
 div 内容2 /div 
 div 内容3 /div 
 /div 
 div id="tabMain2" 
 li tab1 /li 
 li tab2 /li 
 li tab3 /li 
 /ul 
 div 内容1 /div 
 div 内容2 /div 
 div 内容3 /div 
 /div 
 div id="tabMain4" 
 li tab1 /li 
 li tab2 /li 
 li tab3 /li 
 /ul 
 div 内容1 /div 
 div 内容2 /div 
 div 内容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 

通过添加事件和自运行函数完成多个选项卡。



收缩