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.自由定制运行环境,这表示 ...

随机推荐

一个基于DPI技术实现了内网资产识别的应用
https://www.forescout.com/products/counteract/see/visibility-capabilities/ Home ≫ Products ≫ ForeSco ...
Android.DebugTools.Traceview & dmtracedump
1. Android 调试工具之Traceview http://www.cnblogs.com/devinzhang/archive/2011/12/18/2291592.html TraceVie ...
less 官网讲解（ http://www.bootcss.com/p/lesscss/ ）
变量变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用.所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了. // LESS @color: #4D926F; #header { ...
Jenkins2.0中的pipeline
jenkins的实现是标准的master/slave模式,用户与master交互,master将job分布到slave上运行. jenkins的基本概念: 1. master, 也就是jenkins的 ...
Memcache类
class Memcache{ private static $mem = null; public function mem_create(){ self::$mem = new \Memcache ...
Java 线程池 Executor 框架
在Java中,可以通过new Thread 的方法来创建一个新的线程执行任务,但是线程的创建是非常耗时的,而且创建出来的新的线程都各自运行.缺乏统一的管理,这样的后果是可能导致创建过多的线程从而过度消 ...
[Chrome Headless + Python] 截长图（Take Full-page Screenshot）
# -*- coding: utf-8 -*- import time import os from selenium import webdriver from selenium.webdriver ...
[Robot Framework] Robot Framework怎么调试?
Robot Framework怎么debug? 在eclipse里面安装一个插件,就可以debug robot framework的project. 插件下载地址: https://github.co ...
c++11 并发条件变量超时等待的代码练习
资料地址 http://en.cppreference.com/w/cpp/thread/condition_variable/wait_until http://www.cnblogs.com/ha ...
NETSHARP微信开发说明
一.微信开发介绍 1.微信分为个人号,订阅号.服务号,需要去理解三个号的区别,对于开发来说也需要了解不同的账号所提供的功能 2.微信号需要审批,审批之后有一些功能才能使用 3.微信提供的功能及使用情况 ...

js-实现搜狐列表

js-实现搜狐列表的更多相关文章

随机推荐

热门专题