JS实现选项卡实例详解,js选项卡的实现方法

作者: 计算机网络技术  发布:2019-09-06

本文实例叙述了js选项卡的兑现格局。分享给我们供大家参谋。具体分析如下:

正文实例叙述了JS完成选项卡的章程。分享给大家供大家仿效,具体如下:

一、思路

思路:选项卡正是点击开关切换到相应内容,其实正是点击开关把内容通过display(block none)来落到实处切换的。

  1. 获取成分;

  2. for循环开关成分增添onclick(点击) 只怕 onmousemove(移入)事件;

1、首先取得成分。

3. 点击当前按键时会以高亮状态呈现,通过for循环历遍把具有的开关样式设置为空在把具有div的display设置为none。

2、for循环历遍开关成分增多onclick 只怕 onmousemove事件。

  1. 点击当前开关加多样式,把当前div呈现出来,display设置为block。

3、因为点击当前开关时会以高亮状态显示,所以要再通过for循环历遍把具备的按键样式设置为空和把具有DIV的display设置为none。

二、html代码:

4、把当下开关增多样式,把当下DIV展现出来,display设置为block。

<div id="div1">
    <input type="button" class="active" value="1"/>
    <input type="button" value="2"/>
    <input type="button" value="3"/> 
    <input type="button" value="4"/>
      <div class="div2" style="display:block;">11</div>
      <div class="div2">22</div>
      <div class="div2">33</div>
      <div class="div2">44</div>
</div>

注:给多少个因素加多七个事件要用for循环历遍。如选项卡是点击切换,当前按键中度,点击和开关高亮便是2个事件,所以要用2个for循环历遍。

三、css部分:

HTML代码:

.active
{
background:#9CC;
}
.div2
{
width:300px;
height:200px; 
border:1px #666666 solid;
display:none;
}
<div id="box">
 <input type="button" value="1" />
 <input type="button" value="2" />
 <input type="button" value="3" />
 <input type="button" value="4" />
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
</div>

四、js代码:

JS代码:

<script>
window.onload=function(){
   var odiv=document.getElementById('div1');//获取div
   var btn=odiv.getElementsByTagName('input');//获取div下的input
   var div2=odiv.getElementsByTagName('div') ;//获取div下的div

  for(i=0;i<btn.length;i++)//循环每个按钮
   { 
     btn[i].index=i 
//btn[i]是指定button的第i个按钮;为该按钮添加一个index属性,并将index的值设置为i
     btn[i].onclick=function()//按钮的第i个点击事件
    {
    for(i=0;i<btn.length;i++)//循环去掉button的样式,把div隐藏
     { 
       btn[i].className='' //清空按钮的样式
       div2[i].style.display='none'//隐藏div
      }
        this.className='active'//自身添加active
        div2[this.index].style.display='block'//this.index是当前div 
    }
   }
}
</script>
<script>
 window.onload=function(){
  var box=document.getElementById('box');
  var input=box.getElementsByTagName('input');
  var div=box..getElementsByTagName('div');
  for(var i=0;i<input.length;i++){ //循环历遍onclick事件
   input[i].index=i; //input[0].index=0 index是自定义属性
   input[i].onclick=function(){
    for(var i=0;i<input.length;i++){ //循环历遍去掉button样式和把div隐藏
     input[i].className='';
     div[i].style.display='none';
    };
    this.className='active'; //当前按钮添加样式
    div[this.index].style.display='block'; //div显示 this.index是当前div 即div[0]之类的
   };
  };
  };
</script>

仰望本文所述对我们的javascript程序设计具有协助。

补充:用js写轻松选项卡完整步骤

你或然感兴趣的稿子:

  • js达成轻易的可切换选项卡效果
  • javascript落到实处tabs选项卡切换效果(自写原生js)
  • JS完成选项卡实例详解
  • 采纳vue.js写二个tab选项卡效果
  • Vue.js组件tabs达成选项卡切换效果
  • js完结tab选项卡函数代码
  • JQuery 选项卡效果(JS与HTML的握别)
  • 原生js完成tab选项卡切换
  • Vue.js组件tab完成选项卡切换
  • js完毕轻便选项卡作用

如图,最简便易行的纯粹的选项卡

图片 1

首先步,当然是先写html代码和css样式

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

第二步,完结轻便的切换效果

要点1:abc.document.getElementsByTagName("li"):获得abc上边包车型地铁兼具标签为li的成分,再次回到的是三个因素集结,有数组的部分性质。

要点2:循环,先循环给li加上onclick事件,再onlink事件点击的时候,再循环让全部选项卡的act样式去掉,全数的内容遮盖。然后让所点击的选用及对应内容呈现。

要点3:tab_t_li[i].index = i; 在循环时,给选项卡加二个相当的习性并赋值,以做选项卡和内容的相应。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
 var tab_t = document.getElementById("tab_t");
 var tab_t_li = tab_t.getElementsByTagName("li");
 var tab_c = document.getElementById("tab_c");
 var tab_c_li = tab_c.getElementsByTagName("div");
 var len = tab_t_li.length;
 var i=0;
 for(i=0; i<len; i++){
  tab_t_li[i].index = i;
  tab_t_li[i].onclick = function(){
   for(i=0; i<len; i++){
    tab_t_li[i].className = '';
    tab_c_li[i].className = 'hide';
   }
   tab_t_li[this.index].className = 'act';
   tab_c_li[this.index].className = '';
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

其三步,写成函数。上边的写法只好一个页面用二个选项卡,倘使再加一个的话,就需求复制一份,再改比非常多变量名。

要点:tab_t_li[i][evt] 因为传值的时候是字符串,尽管平昔写的话便是tab_t_li[i]."onclick"那样话是实践不断的,tab_t_li["onclick"]如此那般实行没难题。

好了,今后两个页面上就足以有多少个切换了,只须求调用函数的时候,写上相应的id名和标具名,事件名称就足以了

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>无标题文档</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
 tab("tab_t","li","tab_c","div","onmouseover")
 function tab(tab_t,tab_t_tag,tab_c,tag_c_tag,evt){
  var tab_t = document.getElementById(tab_t);
  var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
  var tab_c = document.getElementById(tab_c);
  var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
  var len = tab_t_li.length;
  var i=0;
  for(i=0; i<len; i++){
   tab_t_li[i].index = i;
   tab_t_li[i][evt] = function(){
    for(i=0; i<len; i++){
     tab_t_li[i].className = '';
     tab_c_li[i].className = 'hide';
    }
    tab_t_li[this.index].className = 'act';
    tab_c_li[this.index].className = '';
   }
  }
 }
}
</script>
</head>
<body>
<div class="wrap">
 <ul id="tab_t">
 <li class="act">选择1</li>
 <li>选择2</li>
 <li>选择3</li>
 <li>选择4</li>
 </ul>
 <div id="tab_c">
 <div>内容1</div>
 <div class="hide">内容2</div>
 <div class="hide">内容3</div>
 <div class="hide">内容4</div>
 </div>
</div> 
</body>
</html>

盼望本文所述对我们JavaScript程序设计具备援救。

你或者感兴趣的作品:

  • js实现轻易的可切换选项卡效果
  • js选项卡的落实形式
  • javascript兑现tabs选项卡切换效果(自写原生js)
  • 选择vue.js写八个tab选项卡效果
  • Vue.js组件tabs达成选项卡切换效果
  • js完毕tab选项卡函数代码
  • JQuery 选项卡效果(JS与HTML的告别)
  • 原生js完结tab选项卡切换
  • Vue.js组件tab完成选项卡切换
  • js实现轻便选项卡成效

本文由今晚买四不像发布于计算机网络技术,转载请注明出处:JS实现选项卡实例详解,js选项卡的实现方法

关键词: