js面向对象封装案例 Tab栏切换
一.基本的排版和效果实现:
①.js和html部分:
<body>
<ul id="header">
<li class="active">节目1</li>
<li>节目2</li>
</ul>
<div id="box1">
<ul>
<li>csjabfiabfuisavf</li>
<li>csjabfiabfuisavf</li>
<li>csjabfiabfuisavf</li>
<li>csjabfiabfuisavf</li>
<li>csjabfiabfuisavf</li>
</ul>
</div>
<div id="box2">
<ul>
<li>15555555555315</li>
<li>15555555555315</li>
<li>15555555555315</li>
<li>15555555555315</li>
<li>15555555555315</li>
</ul>
</div>
<script>
var header = document.getElementById('header');
var lis = header.getElementsByTagName('li');
var odiv = document.getElementsByTagName('div');
console.log(odiv);
for (let i = 0; i < lis.length; i++) {
lis[i].onmouseover = function() {