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.自由定制运行环境,这表示 ...
随机推荐
- 分析params_s方法
/** * 解析启动模式参数 * @param $opt */ static public function params_s($opt) { //判断传入了s参数但是值,则提示错误 if ((iss ...
- nim博弈
尼姆博弈 1.问题模型:有三堆各若干个物品,两个人轮流从某一堆取任意多的物品,规定每次至少取一个,多者不限,最后取光者得胜. 2.解决思路:用(a,b,c)表示某种局势,显证(0,0,0)是第一种奇异 ...
- Python如何管理内存？
对于Python来说,内存管理涉及所有包含Python对象和堆. Python内存管理器在内部确保对堆的管理和分配. Python内存管理器具有不同的组件,可处理各种动态存储管理方面,如共享,分段,预 ...
- 百度云的ubuntu16.04.1部署Apache服务器+Django项目
使用Apache和mod_wsgi部署Django 是一种久经考验的将Django投入生产的方法. mod_wsgi是一个Apache模块,可以托管任何Python WSGI应用程序,包括Django ...
- Snownlp
from snownlp import SnowNLP text='宝贝自拍很帅!!!注意休息-' s=SnowNLP(text) #分词print(s.words) #词性for tag in s. ...
- 基于内存，redis，mysql的高速游戏数据服务器设计架构 ZT
zt http://www.cnblogs.com/captainl1993/p/4788236.html 1.数据服务器详细设计 数据服务器在设计上采用三个层次的数据同步,实现玩家数据的高速获取和 ...
- linux 查看信息－服务器相关
查看系统内核 查看磁盘信息 查看CPU的信息 查看内存相关信息
- web项目目录结构
eclipse web项目目录结构 按照 Java EE 规范的规定,一个典型的 Web 应用程序有四个部分: 1. 公开目录 ; 2. WEB-INF/web.xml 文件,发布描述符(必选) ; ...
- ubuntu14简介/安装/菜鸟使用手册
Linux拥有众多的发行版,可以分为两大类商业版和开源社区免费版.商业版以Radhat为代表,开源社区版以debian为代表. 简单的比较ubuntu与centos. Ubuntu 优点:丰富的 ...
- 【Linux】Tree命令安装和使用
Tree命令简介 tree是一种递归目录列表命令,产生一个深度缩进列表文件,这是彩色的ALA dircolors如果ls_colors设置环境变量和输出是TTY.树已经被移植和报道以下操作系统下工作: ...