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插件,实现了低 ...
随机推荐
- java面试第十三天
I/O流 流的概念:程序与数据来源之间的桥梁 流的分类: 按数据方向分:输入流和输出流 输入流:InputStream/Reader 输出流:OutputStream/Writer 按数据类型分:字节 ...
- 解压版MySQL安装后初始化root密码
1: C:\Users\gechong>mysql
- js 数组循环删除元素或对象
1.根据不同条件,删除数组中的元素或对象 for(var i=0,flag=true,len=attrList.length;i<len;flag ? i++ : i){ if(attrList ...
- 分布式协议之两阶段提交协议（2PC）和改进三阶段提交协议（3PC）
一. 事务的ACID 事务是保证数据库从一个一致性的状态永久地变成另外一个一致性状态的根本,当中,ACID是事务的基本特性. A是Atomicity,原子性.一个事务往往涉及到很多的子操作,原子性则保 ...
- Swift教程_swift常见问题（0005）_完美解决Cannot override 'dealloc'异常
Swift教程_swift常见问题(0001)_CoreData: warning: Unable to load class named 'xxx' for entity 'xxx' Swift教程 ...
- tomcat 如何查看tomcat版本及位数
tomcat 如何查看tomcat版本及位数 CreationTime--2018年8月31日10点16分 Author:Marydon 1.tomcat展示 2.具体操作 实现方式:在cmd命令 ...
- spring注解配置quartz
常规配置quartz可以参考我的另外一篇博文:http://www.cnblogs.com/yangzhilong/p/3349116.html spring配置文件里增加: 命令空间: http:/ ...
- Eureka集群试验的一点总结
先简单描述一下试验: 试验在一台机器上进行,假设有host文件中配置了以下内容 127.0.0.1 left 127.0.0.1 center 127.0.0.1 right 试验中搭建三个注册中心实 ...
- Java多线程中run(), start(), join(), wait(), yield(), sleep()的使用
Run 每个Thread中需要实现的方法, 如果直接调用的话, 会是和单线程一样的效果, 要另起线程需要使用start(). start 新起线程调用run(). 主线程不等待直接往下执行 Yield ...
- C-常用字符串操作函数详解
//使用字符串操作应时刻注意字符串或者数组长度!!避免溢出!! 1. size_t strlen(char const *str); //计算字符串长度, 注意返回size_t类型的值, 即unsig ...