js-实现搜狐列表
<!DOCTYPE html>
<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/1.png" />
<p class="content">解密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">3</span>
<img src="img/1.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/1.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/1.png" />
<p class="content">解：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">3</span>
<img src="img/1.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/1.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/1.png" />
<p class="content">密：关于地球与人类的一千零一个问题</p>
<button class="btn">按钮</button>
</li>
<li>
<span class="num">3</span>
<img src="img/1.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/1.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 j = 0; j < aLi.length; j++) {
tab(aLi[j])
}
}
function tab(obj) {
obj.onmouseover = function() {
var oImg = this.getElementsByTagName("img")[0]
var oBtn = this.getElementsByTagName("button")[0]
oImg.style.display = "inline-block"
oBtn.style.display = "inline-block"
}
obj.onmouseout = 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].onclick = 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>
js-实现搜狐列表的更多相关文章
- 搜狐云景paas平台实践之路
前言: 搜狐云景作为搜狐的paas平台,在2014年5月22日的云计算大会上正式发布了公测.初测,注册用户必须先申请邀请码参与公测会赠送用户100元电子券,经过实名认证之后会再赠送100电子券,目测可 ...
- 搜狐视频Redis私有云平台CacheCloud
一.CacheCloud是做什么的 CacheCloud提供一个Redis云管理平台:实现多种类型(Redis Standalone.Redis Sentinel.Redis Cluster)自动部署 ...
- 浅谈搜狐云景PAAS平台
前言: 搜狐云景作为搜狐的paas平台,在2014年5月22日的云计算大会上正式公布了公測.初測,注冊用户必须先申请邀请码參与公測会赠送用户100元电子券,经过实名认证之后会再赠送100电子券.目測能 ...
- jquery仿搜狐投票动画代码
体验效果:http://hovertree.com/texiao/jquery/21/ 这是一款基于jquery实现的仿搜狐投票动画特效源码,运行该源码可见VS图标首先出现在中间位置,紧接着随着投票比 ...
- crawler4j源码学习(1)：搜狐新闻网新闻标题采集爬虫
crawler4j是用Java实现的开源网络爬虫.提供了简单易用的接口,可以在几分钟内创建一个多线程网络爬虫.下面实例结合jsoup,采集搜狐新闻网(http://news.sohu.com/)新闻标 ...
- 【NLP】3000篇搜狐新闻语料数据预处理器的python实现
3000篇搜狐新闻语料数据预处理器的python实现 白宁超 2017年5月5日17:20:04 摘要: 关于自然语言处理模型训练亦或是数据挖掘.文本处理等等,均离不开数据清洗,数据预处理的工作.这里 ...
- 基于jieba,TfidfVectorizer,LogisticRegression进行搜狐新闻文本分类
一.简介 此文是对利用jieba,word2vec,LR进行搜狐新闻文本分类的准确性的提升,数据集和分词过程一样,这里就不在叙述,读者可参考前面的处理过程 经过jieba分词,产生24000条分词结果 ...
- 利用jieba,word2vec,LR进行搜狐新闻文本分类
一.简介 1)jieba 中文叫做结巴,是一款中文分词工具,https://github.com/fxsjy/jieba 2)word2vec 单词向量化工具,https://radimrehurek ...
- 体验搜狐PaaS平台搜狐云景-自动调度(Autoscale)
今天,收到一封「搜狐云景」送邀请码的邮件,价值 200 rmb,立马前往官网简单了解一下,这个玩意儿是搜狐公司云战略的一个产品,一个 PaaS 平台,简单了解了一下特性: 1.自由定制运行环境,这表示 ...
随机推荐
- PAT 1002 写出这个数 (20)（代码）
1002 写出这个数 (20)(20 分) 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字. 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值.这里保证n小于10^100 ...
- Thread中join()方法进行介绍
http://www.cnblogs.com/skywang12345/p/3479275.html https://blog.csdn.net/dabing69221/article/details ...
- db2创建数据库
1.在实例用户用户下执行 db2 create database <DBName> on /home/db2inst1/<DBName> using codeset UTF ...
- match
//清空数据match (n) detach delete n (一)查询节点1.查询所有节点 //查询数据库中的所有节点 match(n)return n 2.查询带有某个标签的所有节点 //查询数 ...
- 美食类Web原型制作分享-Taste
Taste是国外知名的美食类网站,为人们提供丰富的美食菜单,帮助人们更好的享受美食带来的快乐.网站采用图文结合的排版方式,有固定顶部导航栏的交互功能等. 本原型由国产原型工具Mockplus和团队协作 ...
- Maximum Average Subarray II LT644
Given an array consisting of n integers, find the contiguous subarray whose length is greater than o ...
- centos php 运行环境搭建
一.安装apache httpd rpm -qa|grep httpd //检查是否安装apache rpm -e 包名 --nodeps //若有则删除 PS:我没有删除,直接用的服务器原来的. y ...
- Globalization and accessibility for tile and toast notifications (Windows Store apps)
http://msdn.microsoft.com/en-us/library/windows/apps/hh831183.aspx 做 HighContrast时,采用以下分目录方式: /Proje ...
- [C#.Net]判断文件是否被占用的两种方法
今天开发产线测试Tool时发现日志文件会几率性的被占用,上网浏览找到最简单的代码(API或者FileStream),在这里抛砖引玉下. 第一种方法:API using System.IO; using ...
- 【C#】详解C#委托
目录结构: contents structure [+] 委托语法 泛型委托 委托链 lambda表达式 揭秘委托 类库中的委托 委托和反射 1.委托语法 本文会详细阐述委托的使用,以及实现,想必读者 ...