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插件,实现了低 ...
随机推荐
- 建maven私服nexus
1.下载nexus 2.配置java环境 3.安装 C:\Program Files\nexus\nexus-2.11.4-01\bin\jsw\windows-x86-64 4.配置 http:// ...
- Flash：DisplayObject的transform/matrix的潜规则、小bug
AS3中,使用DisplayObject的transform/matrix,需要先clone出来,再变换,再赋值回去,这样才会对DisplayObject产生影响,不能直接对原Matrix操作. ...
- 解决sitemesh3装饰页面不能使用freemarker标签问题
如题,这个问题其实在sitemesh2中已经很好的解决了,不过在sitemesh3中可能没有解决,所以要自己写代码解决了,下面我先讲下sitemesh2是如何解决的: <servlet> ...
- PHP实现4种排序算法
1.冒泡排序 冒泡排序其实是基于“交换”.每次从第一个记录开始,一.二两个记录比较,大的往后放,二三两个记录比较...依次类推,这就是一趟冒泡排序.每一趟冒泡排序后,无序序列中值最大的记录冒到序列末尾 ...
- 让 linux centos 文件夹地址栏 位置栏显示出来的方法
今天又拿起心爱的 linux ,发现多日不用又忘记了不少知识了 , 发现忘记的速度真是惊人的! 设置方法: 编辑-> 首选项-> 勾选 总是在浏览器窗口中打开, 如图:
- MFC图形绘制——绘制直尺和坐标系
一.实验目的 1.掌握建立MFC应用程序的方法: 2.掌握映射模式. 二.实验内容 1.在MFC中绘制直尺,直尺需要有刻度,类似于日常学生使用的透明塑料直尺,需要建立四个直尺,分别分布在屏幕客户区的上 ...
- innerHTML和innerText区分
示例代码:<div id="test"> <span style="color:red">test1</span> test ...
- Linux Pin Control 子系统
Pin Control Subsystem是Linux内核抽象出的一套用于控制硬件引脚的一套子系统. 1.源文件列表 源码位于linux/drivers/pinctrl目录下,源文件列表如下: 文件名 ...
- Hibernate的like用法
直接写String sql = "from ClientInfo as a where a.client_name like '%"+ clientname+"%'&qu ...
- Math.Celing、Math.Floor、Math.DivRem与Math.BigMul
返回大于或等于指定数字的最小整数.例如: double a=Math.Celing(0.00); //0 double a=Math.Celing(0.40); //1 double a=Math ...