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.自由定制运行环境,这表示 ...
随机推荐
- 使用/\_ 打印正三角形 C/C++
输入size,level,使用/\_,打印正三角形 #include<stdio.h> int main() { int level, size; printf("Enter l ...
- Python.tornado.0
Tornado https://github.com/facebook/tornado http://www.tornadoweb.org/en/stable/guide/intro.html (A ...
- 错误：在非结构或联合中请求成员‘next’
#include <stdio.h> #include <stdlib.h> #define ElemType int #define Status int #define O ...
- invalid END header解决方法
我在Windows上的eclipse开发了一个java web项目,然后压缩成war包,通过ftp发送到Linux服务器上,Tomcat先shutdown,再startup.按理说,会在webapps ...
- Mac OS 10.12 - 在VMwear Workstation12.5.2中以两种方式进入恢复模式（Recovery）！！！
注意:如果你打算安装Mac OS10.12 到虚拟机里面学习,那么我强烈建议你在没有安装任何其它软件之前,按照我这篇博客来进入恢复模式(Recovery),禁用Rootless机制!!!这样处理后,你 ...
- C#程序如何以管理员身份运行
VISTA 和 Windows 7 都使用了UAC来控制程序访问,对于一些需要使用管理员身份运行的程序就得右键以管理员身份运行. C# 编程中可以使程序自动使用管理员身份运行,也就是我们常常看到一些程 ...
- JQuery中after() append() appendTo()的区别
首先 after() 是追加在元素外边而append() appendTo()是追加在元素里面. $(selector).after(content) $("span").afte ...
- OneZero第三周第四次站立会议（2016.4.7）
1. 时间: 18:35--18:50 共计15分钟. 2. 成员: X 夏一鸣 * 组长 (博客:http://www.cnblogs.com/xiaym896/), G 郭又铭 (博客:http: ...
- SpringMVC 学习 八 SSM环境搭建（一） web.xml配置
第一步:导入jar包 注意包的兼容性,以后采用maven会好很多 第二步:配置web.xml 在web.xml中,主要的配置内容有以下几点 (1)spring容器配置文件的位置 <!-- spr ...
- MySQL open_files_limit相关设置
背景: 数据库链接不上,报错: root@localhost:/var/log/mysql# mysql -uzjy -p -h192.168.1.111 --default-charact ...