<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>搜狐视频记录片列表展示</title>
<style>
html, body, div, h2, ul, li, p {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
color: black;
text-decoration: none;
}
#ranking {
padding-left: 5px;
padding-right: 8px;
background-color: #DEE7E7;
width: 267px;
overflow: hidden;
}
h2 {
height: 38px;
line-height: 38px;
font-size: 18px;
color: #2C4C5D;
padding-left: 13px;
padding-right: 43px;
float: left;
border-bottom: 1px solid #B4CFDD;
}
#tabNav {
overflow: hidden;
margin-top: 13px;
}
#tabNav li {
float: left;
font-size: 12px;
line-height: 24px;
height: 24px;
border: 1px solid #b4cfdd;
border-right: 0px;
padding: 0 6px;
color: #497790;
cursor: pointer;
}
#tabNav li:last-child {
border-right: 1px solid #b4cfdd;
}
#tabContent {
clear: left;
}
#tabContent ul li {
line-height: 28px;
font-size: 12px;
position: relative;
}
#tabContent ul span {
position: absolute;
height: 14px;
line-height: 18px;
width: 18px;
text-align: center;
background-color: #1A68A2;
color: #fff;
font-size: 8px;
font-weight: bold;
left: 6px;
top: 6px;
z-index: 1;
}
#tabContent li a {
display: inline-block;
margin-left: 37px;
}
#tabContent li {
border-bottom: 1px dashed #fff;
cursor: pointer;
}
#tabContent ul li:last-child {
border-bottom: none;
}
#tabContent ul div {
height: 82px;
background: #fff;
overflow: hidden;
display: none;
}
#tabContent div img {
height: 70px;
border: 1px solid #000;
margin: 6px;
margin-left: 30px;
float: left;
}
#tabContent p {
float: left;
width: 150px;
line-height: 16px;
padding-top: 10px;
}
#tabContent div a {
position: absolute;
right: 10px;
bottom: 4px;
color: #fff;
background: #1A68A2;
padding: 0 5px;
font-size: 10px;
line-height: 20px;
}
#tabContent ul li:last-child {
text-align: right;
}
#daily, #monthly, #all {
display: none;
}
.show {
display: block !important;
}
.active {
color: #000;
font-weight: bold;
background: #fff;
border-bottom: 1px solid #fff !important;
}
</style>
<script>
window.onload = function(){
var oNav=document.getElementById('tabNav');
var oNavLi=oNav.getElementsByTagName('li');
var oCon=document.getElementById('tabContent');
var oUl=oCon.getElementsByTagName('ul');
var oDaily=document.getElementById('daily');
var oMonthly=document.getElementById('monthly');
var oAll=document.getElementById('all');
var oLi=oDaily.getElementsByTagName('li');
var num=0;
var oDiv=[];
for(var i=0;i<oNavLi.length;i++){
oNavLi[i].num=i;
oNavLi[i].onclick=function(){
for(var j=0;j<oNavLi.length;j++){
oNavLi[j].className='';
}
this.className='active';
for(var i=0;i<oUl.length;i++){
oUl[i].className='';
}
oUl[this.num].className='show';
}
}
for(var i=0;i<oLi.length;i++){
oDiv.push(oLi[i].getElementsByTagName('div')[0]);
}
for(var i=0;i<oLi.length;i++){
oLi[i].num=i;
oLi[i].onmouseover=function(){
for(var i=0;i<oDiv.length;i++){
oDiv[i].style.display='none';
}
oLi[this.num].getElementsByTagName('div')[0].style.display='block';
}
}
}
</script></head>
<body>
<div id="ranking">
<h2>观看排行榜</h2>
<ul id="tabNav">
<li class="active">每日</li>
<li>每周</li>
<li>全部</li>
</ul>
<div id="tabContent">
<ul id="daily" class="show">
<li>
<span>1</span>
<a href="#" onclick = "javascript:">解密：关于地球与人类的一千零一问</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>2</span>
<a href="#" onclick = "javascript:">经典传奇：探索全世界重大历史事件</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>3</span>
<a href="#" onclick = "javascript:">眼界：展现普通人的曲折命运和动人...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>4</span>
<a href="#" onclick = "javascript:">档案（BTV）：惊人事件和传奇背...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>5</span>
<a href="#" onclick = "javascript:">世界十最：30个震惊世界的Top...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>6</span>
<a href="#" onclick = "javascript:">身边的毛泽东：警卫员解密毛泽东秘...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>7</span>
<a href="#" onclick = "javascript:">新电影传奇：每一步电影都有自己的...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>8</span>
<a href="#" onclick = "javascript:">档案（上视纪实频道）：解密档案中...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>9</span>
<a href="#" onclick = "javascript:">探寻传世国宝的千古传奇</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>10</span>
<a href="#" onclick = "javascript:">纪实系列：讲述社会百态，透视事实...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<a href="#">更多>></a>
</li>
</ul>
<ul id="monthly" >
<li>
<span>1</span>
<a href="#" onclick = "javascript:">每月：关于地球与人类的一千零一问</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>2</span>
<a href="#" onclick = "javascript:">每月传奇：探索全世界重大历史事件</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>3</span>
<a href="#" onclick = "javascript:">每月：展现普通人的曲折命运和动人...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>4</span>
<a href="#" onclick = "javascript:">每月（BTV）：惊人事件和传奇背...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>5</span>
<a href="#" onclick = "javascript:">每月十最：30个震惊世界的Top...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>6</span>
<a href="#" onclick = "javascript:">每月的毛泽东：警卫员解密毛泽东秘...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>7</span>
<a href="#" onclick = "javascript:">每月影传奇：每一步电影都有自己的...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>8</span>
<a href="#" onclick = "javascript:">每月（上视纪实频道）：解密档案中...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>9</span>
<a href="#" onclick = "javascript:">每月传世国宝的千古传奇</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>10</span>
<a href="#" onclick = "javascript:">每月系列：讲述社会百态，透视事实...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<a href="#">更多>></a>
</li>
</ul>
<ul id="all" >
<li>
<span>1</span>
<a href="#" onclick = "javascript:">全部：关于地球与人类的一千零一问</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>2</span>
<a href="#" onclick = "javascript:">全部传奇：探索全世界重大历史事件</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>3</span>
<a href="#" onclick = "javascript:">全部：展现普通人的曲折命运和动人...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>4</span>
<a href="#" onclick = "javascript:">全部（BTV）：惊人事件和传奇背...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>5</span>
<a href="#" onclick = "javascript:">全部十最：30个震惊世界的Top...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>6</span>
<a href="#" onclick = "javascript:">全部的毛泽东：警卫员解密毛泽东秘...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>7</span>
<a href="#" onclick = "javascript:">全部影传奇：每一步电影都有自己的...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>8</span>
<a href="#" onclick = "javascript:">全部（上视纪实频道）：解密档案中...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>9</span>
<a href="#" onclick = "javascript:">全部传世国宝的千古传奇</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<span>10</span>
<a href="#" onclick = "javascript:">全部系列：讲述社会百态，透视事实...</a>
<div>
<img src="5-img/pen.png" alt="pen">
<p>
解密：关于地球与人类的一千零一问
</p>
<a href="#">播放</a>
</div>
</li>
<li>
<a href="#">更多>></a>
</li>
</ul>
</div>
</div></body>
</html>
出现这种错误，一般是没有获取到dom，常见的就是数组越界了
for(var i=0;i<oLi.length;i++){
oDiv.push(oLi[i].getElementsByTagName('div')[0]);
}oLi.length为11
但是第11个下是没有div元素的
那么在接下来的
for(var i=0;i<oLi.length;i++){
oLi[i].num=i;
oLi[i].onmouseover=function(){
for(var i=0;i<oDiv.length;i++){
oDiv[i].style.display='none';
}
oLi[this.num].getElementsByTagName('div')[0].style.display='block';
}oDiv[i].style.display='none';就会报错了oDiv[10]为undefined