Apprenez le javascript orienté objet et expliquez l'onglet orienté objet avec les compétences examples_javascript

L'exemple de cet article explique la méthode d'implémentation d'onglets orientés objet la plus simple et la partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant

.

Rendu :

1. Description de la fonction

Cliquez sur les trois boutons pour afficher les onglets correspondants
2. Description du code HTML

<div class="box" id="box">
 <ul class="list">
  <li class="in_active">第一张选项卡</li>
  <li class="in">第二张选项卡</li>
  <li class="in">第三张选项卡</li>
 </ul>
 <nav class="conList">
  <a class="con_active" href="javascript:;">第一个控制按钮</a>
  <a class="con" href="javascript:;">第二个控制按钮</a>
  <a class="con" href="javascript:;">第三个控制按钮</a>
 </nav> 
</div>

3. Description des codes CSS clés

/*in为选项卡普通状态，默认不显示*/
.in,.in_active{
 display: none;
 width: 600px;
 height: 100px;
 background: orange;
 font-size: 50px;
 line-height: 100px;
 text-align: center;
}
/*in_active为选项卡选中状态，选中后显示*/
.in_active{
 display: block;
}
/*con为按钮普通状态，默认文字颜色为黑色*/
.con,.con_active{
 color: black;
 background-color: orange;
}
/*con_active为按钮选中状态，选中后文字颜色为白色*/
.con_active{
 color: white; 
}

4.description du code js

function Tab(obj){
 /*元素获取*/
 //获取选项卡展示部分
 this.oList = obj.getElementsByTagName('ul')[0];
 this.aIn = this.oList.getElementsByTagName('li');
 //获取选项卡控制部分
 this.oConList = obj.getElementsByTagName('nav')[0];
 this.aCon = this.oConList.getElementsByTagName('a');
 /*变量设置*/
 //选项卡张数
 this.count = this.aIn.length;
 //当前第几张
 this.cur = 0;
 var _this = this;

 for(var i = 0; i < this.count; i++){
  //设置索引
  this.aCon[i].index = i;
  //给按钮添加事件
  this.aCon[i].onclick = function(){
   _this.cur = this.index;
   _this.switch();
  }
 }
}
Tab.prototype.switch = function(){
 //去掉所有
 for(var i = 0; i < this.count; i++){
  this.aIn[i].className = 'in';
  this.aCon[i].className = 'con';
 }
 //显示当前
 this.aIn[this.cur].className = 'in_active';
 this.aCon[this.cur].className = 'con_active'; 
}
//获取选项卡元素
var oBox = document.getElementById('box');
//构造选项卡对象
var tab1 = new Tab(oBox);

J'espère que cet article sera utile à tout le monde pour apprendre le JavaScript orienté objet.