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.自由定制运行环境,这表示 ...
随机推荐
- Linux服务器有什么优势？
为您的企业选择服务器时,您可以选择几种不同的选项.虽然许多公司使用基于Windows的服务器,但选择Linux服务器可能是您最好的选择.为什么Linux服务器比其他服务器更好?以下是使用Linux服务 ...
- vim自动添加tags、cscope
每次打开一个工程都需要重新添加tags.cscope,很不方便,网上找了一下. 将其添加到 ~/.vimrc 中之后,打开 vim 就会自动搜索当前路径下的tags.cscope添加进去. 自动添加 ...
- tmp下莫名其妙生成root权限的缓存文件
现象: 原因:跟ngnix.conf有关,跟tmp的owner有关
- vue组件中this和$el指向
示例代码为element ui 源码的select组件源码 控制台输出: 结论: this指向组件的实例. $el指向当前组件的DOM元素.
- java链表实现
import java.util.Scanner; class DATA2 { String key; // 结点的关键字 String name; int age; } class CLType / ...
- TabControl中显示和隐藏TabPage页
在使用TabControl控件时,希望隐藏其中某个选项卡(即TabPage).TabPage类明明提供了一个Hide方法,用在代码中却没有任何效果,甚是奇怪.无奈之余,只好考虑另辟途径 方法一: 设置 ...
- UDDI
什么是 UDDI? UDDI 是一个独立于平台的框架,用于通过使用 Internet 来描述服务,发现企业,并对企业服务进行集成. UDDI 指的是通用描述.发现与集成服务 UDDI 是一种用于存储有 ...
- Bootstrap之Bootstrap组件
一 文本居中 col-xx-offset-xx:水平居中 center-block:使用于不涉及float标签的水平居中,也不涉及列的居中,让哪里居中就写到哪里,本质是:margin:0 auto. ...
- python学习之ansible api
Python API 2.0 从2.0的事情开始更复杂一些,但是你会得到更多离散和可读的类: #!/usr/bin/env python import json from collections im ...
- Python中逗号的妙用
闲着没事打算用Python刷一遍pat,输出过程中遇到了一个这样的问题: 题目1002题目要求 在一行内输出n的各位数字之和的每一位,拼音数字间有1 空格,但一行中最后一个拼音数字后没有空格, 但是P ...