<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
body{
font-size: 14px;
font-family: "微软雅黑";
}
ul li{
list-style:none;
}
.oBig{
width: 280px;
margin: 30px auto;
background: #DEE7E7;
}
.ohead{
float: left;
height: 40px;
line-height: 40px;
font-size: 16px;
padding: 7px 30px 0 10px;
}
.titUl{
margin-top: 10px;
float: left;
}
.titUl li{
float: left;
padding: 5px 10px;
border: 1px solid #fff;
margin-right: 2px;
cursor: pointer;
}
.titUl li.active{
background: #1A68A2;
color: #fff;
}
.oMain{
clear: both;
}
.oMain img{
height: 70px;
float: left;
border: 1px solid black;
display: none;
}
.oMain .num{
float: left;
padding: 0 6px;
border: 1px solid #fff;
background: #6666FF;
color: #fff;
cursor: pointer;
}
.oMain .show li{
clear: both;
padding: 10px 0px;
min-height: 20px;
cursor: pointer;
}
.oMain ul{
display: none;
}
.oMain .show li:after{
display: block;
content: "";
clear: both;
}
.img_detail{
height: 70px;
}
.btn{
padding: 6px 8px;
outline: none;
border:none;
float: right;
cursor: pointer;
margin-top: 6px;
background:#1A68A2;
border: 1px solid #ddd;
color: #fff;
border-radius: 4px;
display: none;
}
.content{
word-break: break-all;
}
</style>
</head>
<body>
<div class="oBig">
<h2 class="ohead">观看排行榜</h2>
<ul class="titUl" id="titShow">
<li>每日</li>
<li>每周</li>
<li>全部</li>
</ul>
<div class="oMain" id="main">
<ul class="show">
<li>
<span class="num">1</span>
<img src="img/1.png" />
<p class="content">解密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">2</span>
<img src="img/2.png" />
<p class="content">解密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">3</span>
<img src="img/3.png" />
<p class="content">解密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">4</span>
<img src="img/4.png" />
<p class="content">解密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">5</span>
<img src="img/1.png" />
<p class="content">解密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
</ul>
<ul class="show">
<li>
<span class="num">1</span>
<img src="img/2.png" />
<p class="content">解：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">2</span>
<img src="img/3.png" />
<p class="content">解：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">3</span>
<img src="img/4.png" />
<p class="content">解：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">4</span>
<img src="img/1.png" />
<p class="content">解：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">5</span>
<img src="img/2.png" />
<p class="content">解：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">6</span>
<img src="img/3.png" />
<p class="content">解：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">7</span>
<img src="img/4.png" />
<p class="content">解：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
</ul>
<ul class="show">
<li>
<span class="num">1</span>
<img src="img/1.png" />
<p class="content">密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">2</span>
<img src="img/2.png" />
<p class="content">密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">3</span>
<img src="img/3.png" />
<p class="content">密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">4</span>
<img src="img/4.png" />
<p class="content">密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">5</span>
<img src="img/1.png" />
<p class="content">密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">6</span>
<img src="img/2.png" />
<p class="content">密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">7</span>
<img src="img/3.png" />
<p class="content">密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">8</span>
<img src="img/4.png" />
<p class="content">密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
</ul>
</div>
</div>
<script>
/*
搜狐列表的实现
* */
var oList=document.getElementById("titShow")
var oLi=oList.getElementsByTagName("li")
var oMain=document.getElementById("main")
var oUl=oMain.getElementsByTagName("ul")
for(var i=0;i<oUl.length;i++){
var aLi=oUl[i].getElementsByTagName("li")
for(var x=0;x<aLi.length;x++){
str(aLi[x])
}
}
function str(obj){
obj.οnmοuseοver=function(){
var oImg=this.getElementsByTagName("img")[0]
var oBtn=this.getElementsByTagName("button")[0]
oImg.style.display="inline-block"
oBtn.style.display="inline-block"
}
obj.οnmοuseοut=function(){
var oImg=this.getElementsByTagName("img")[0]
var oBtn=this.getElementsByTagName("button")[0]
oImg.style.display="none"
oBtn.style.display="none"
}
}
// 内容
oLi[0].className="active"
oUl[0].style.display="block"
for(var i=0;i<oLi.length;i++){
oLi[i].index=i
oLi[i].οnclick=function(){
for(var i=0;i<oLi.length;i++){
oUl[i].style.display="none"
oLi[i].className=""
}
this.className="active"
oUl[this.index].style.display="block"
}
}
</script>
</body>
</html>
搜狐列表效果图如下：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
