tab栏切换fengz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
height: 300px;
width: 400px;
border:1px solid #000;
margin: 100px auto;
}
.mt span{
display: inline-block;
width: 93px;
height: 50px;
border: 1px solid #333;
text-align: center;
line-height: 50px;
background: #ff3;
}
.mt span.current{
background: purple;
}
ul li{
list-style: none;
float: left;
width: 400px;
height: 250px;
border: 1px solid #e0e0e0;
display: none;
background: purple;
}
ul li.show{
display: block;
}
</style>
</head>
<body>
<div class="box" id="three">
<div class="mt">
<span class="current">新闻</span>
<span>体育</span>
<span>娱乐</span>
<span>八卦</span>
</div>
<div class="mb">
<ul>
<li class="show">新闻模块</li>
<li>体育模块</li>
<li>娱乐模块</li>
<li>八卦模块</li>
</ul>
</div>
</div>
<div class="box" id="one">
<div class="mt">
<span class="current">新闻</span>
<span>体育</span>
<span>娱乐</span>
<span>八卦</span>
</div>
<div class="mb">
<ul>
<li class="show">新闻模块</li>
<li>体育模块</li>
<li>娱乐模块</li>
<li>八卦模块</li>
</ul>
</div>
</div>
<div class="box" id="two">
<div class="mt">
<span class="current">新闻</span>
<span>体育</span>
<span>娱乐</span>
<span>八卦</span>
</div>
<div class="mb">
<ul>
<li class="show">新闻模块</li>
<li>体育模块</li>
<li>娱乐模块</li>
<li>八卦模块</li>
</ul>
</div>
</div>
</body>
</html>
<script>
window.onload=function () {
function tab(obj) {
var target=document.getElementById(obj);
var spans=target.getElementsByTagName('span');
var lis=target.getElementsByTagName('li');
for(var i=0;i<spans.length;i++){
spans[i].index=i;
spans[i].onmouseover=function (ev2) {
for(var j=0;j<spans.length;j++){
spans[j].className=' ';
lis[j].className=' ';
}
this.className='current';
lis[this.index].className='show';
}
}
}
tab('one');
tab('two');
tab('three');
}
</script>
tab栏切换fengz的更多相关文章
- jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
- dataTable tab栏切换时错位解决办法
做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...
- tab栏切换
最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...
- tab栏切换制作
tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- JS实现 Tab栏切换案例
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...
- tab栏切换的特殊效果
在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...
- JavaScript实现Tab栏切换
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...
- [javascript]switchTab:仿腾讯首页Tab栏切换js插件
腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...
随机推荐
- openerp发送给群组信息
发送给群组 self.pool.get('mail.group').message_post(cr, uid, [1], body=_('Welcome to ! Please ...
- hdu5246 超级赛亚ACMer
Problem Description 百小度是一个ACMer,也是一个超级赛亚人,每一个ACMer都有一个战斗力.包含百小度. 所谓超级赛亚人的定义,是说假设在对抗中刚好接近极限状态,那就会激发斗志 ...
- 错误：google-chrome-stable-44.0.2403.157-1.x86_64.rpm 的公钥没有安装
错误:google-chrome-stable-44.0.2403.157-1.x86_64.rpm 的公钥没有安装 Fedora22 系统更新软件包.出现: warning: /var/cache/ ...
- glob 模块
# -*- coding: utf-8 -*- #python 27 #xiaodeng #glob 模块 #http://python.jobbole.com/81552/ #查找文件只用到三个匹配 ...
- getsockopt和accept需要注意的两个细节
1,getsockopt连续调用问题 通常情况下,在一个socket fd上出现错误时,我们会通过 int status; socklen_t slen; getsockopt(fd, SOL_SOC ...
- 配置Windows server 2008文件同步[转]
众所周知,Linux系统可以用rsync来实现文件或目录的同步,windows系统下也一样可以.我们现在就用cwRsync来实现windows server 2008系统下的文件同步. 一.系统环境 ...
- 转 HTTP协议 (四) 缓存
转自:http://www.cnblogs.com/TankXiao/archive/2012/11/28/2793365.html 缓存的概念 缓存这个东西真的是无处不在, 有浏览器端的缓存, 有服 ...
- 工作中常用的mysql操作
一.在一个数据库中定义的存储过程或者是函数在另一数据库的存储过程中引用 1.我首先在数据库player_db中构建了一个函数:p_exp_to_level BEGIN ; ; RETURN v_lev ...
- linux怎么查看一个文件夹的大小
linux查看一个文件夹的大小的命令为: -lh 该文件夹的完整路径 例,查询/var文件夹的大小: -lh /var du 递归查询该路径下所有文件的大小(若不加任何参数,则显示文件夹内的所有文件, ...
- 怎么把本地的文件放到esxi主机上
我们登录到esxi主机后 然后我们点击摘要-->存储器--->右键,浏览数据存储 创建文件夹,然后选择上传到此文件存储