JavaScript实现Tab切换
在网页开发中，常常会遇见很多Tab切换，Tab切换增加网页浏览的舒适性，对于开发人员特别常见，本文使用JS实现tab切换效果，仅对学习中遇到的知识点做一个总结。
效果图如下：
实现思路：
1.首先使用HTML和CSS构建静态网页如上，标题使用ul-li标签，有浮动，主体使用四个大小一样的盒子，不添加JS时候，盒子竖直排列（很丑很丑）
2.添加JS代码
2.1 首先实现标题的Tab效果
2.1.1获取所有的li元素，注册鼠标进入事件，在鼠标进入事件中，清除所有的li元素样式，然后给当前li元素添加样式
2.1.2在注册事件前，给所有的li元素通过setAttribute()方法给li挨个添加index属性，记录标签的序号，方便和主体div对应
2.2 实现所有的主体模块Tab效果
2.2.1 获取所有的主体DIV，与标签进行绑定，通过getAttribute()方法获得当前标签的索引，通过该索引得到DIV集合中与标签对应的div
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0px;
margin: 0px;
}
/* 总体大盒子 */
#box{
width: 400px;
height: 300px;
border: 1px solid gray;
margin: 100px auto auto;
}
/* 大盒子中头部小盒子ul */
#hd{
height: 45px;
}
/* 小盒子ul中li标签 */
#hd li{
height: 45px;
display: inline-block;
line-height: 45px;
width: 98px;
text-align: center;
border: 1px solid gray;
float: left;
list-style: none;
}
/* 大盒子中主体小盒子 */
#bd{
height: 255px;
}
/* 各个小版块 */
#bd div{
height: 100%;
display: none; } #bd,#hd .current{
display: block;
background-color: #ECEEF1;
}
</style> </head>
<body>
<div id="box">
<ul id="hd">
<li class="current">体育</li>
<li>娱乐</li>
<li>新闻</li>
<li>综合</li>
</ul> <div id="bd">
<div class="current" style="display: block;">这是体育频道</div>
<div>这是娱乐频道</div>
<div>这是新闻频道</div>
<div>这是综合频道</div>
</div>
</div>
<!-- 插入JS代码 -->
<script>
// 思路:
// 1.实现标题小模块的Tab切换
// 1.1 首先给所有的标题小模块清除样式
// 1.2 给鼠标移入的标题小模块添加样式
// 2.实现主体模块和标题小模块之间的绑定
// 2.1 给标题小模块添加一个属性index,用以记录标题小模块的索引
// 2.2 通过getAttribute()方法得到索引,从而对应主体模块的内容
var hd=document.getElementById('hd');
//获得所有的标题小模块
var lis=hd.getElementsByTagName('li');
//获得所有的主体模块
var bd=document.getElementById('bd');
var divs=bd.getElementsByTagName('div');
//给所有的li注册事件
for(var i=0;i<lis.length;i++){
var li=lis[i];
li.setAttribute('index',i);
li.onmouseover=function(){
//每次鼠标移入的时候,清除所有的小模块样式,只给当前的小模块加入样式
for(var i=0;i<lis.length;i++){
lis[i].className="";//所有模块样式清除
this.className="current";
//鼠标移入的时候,给所有的主体模块清除样式,然后给对应当前小模块的主体模块添加样式
divs[i].className="";
divs[i].style.display="none"; //对当前的模块的进行操作
var index=parseInt(this.getAttribute('index'));
divs[index].className="current";
divs[index].style.display="block";
}
}
}
</script>
</body>
</html>
JavaScript实现Tab切换的更多相关文章
- JavaScript的Tab切换
在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...
- 怎么用JavaScript实现tab切换
先看一下代码实现后的最终效果: 用JavaScript实现思路很简单,就是先把所有的内容隐藏,点击标题对应的内容显示, css代码如下: <style type="text/css&q ...
- jQuery的DOM操作实例（1）——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- 实用CSS3属性之 :target伪类实现Tab切换效果
CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...
- javascript回车完美实现tab切换功能
javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel ...
- javascript学习教程之---如何从一个tab切换到banner幻灯片的转换
一个简单的tab切换代码: <!doctype html> <html> <head> <meta charset="utf-8"> ...
- 每天一个JavaScript实例-tab标签切换
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaScript学习笔记2之Tab切换
1.Tab切换简写版1 页面布局如下: <div id="tab"> <h1 id="title"> <span class=&q ...
- JavaScript实现Tab栏切换
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...
随机推荐
- html+css定位篇
position absolute相对于父元素移动,不在父元素范围内时,可能和其他元素重叠 relative相对于初始位置来进行移动 fixed相对于浏览器进行定位,无论滑轮如何滚动,始终出现在浏览器 ...
- <meta name="viewport" content="width=device-width, initial-scale=1.0">理解
ViewPort <meta>标记用于指定用户是否可以缩放Web页面,如果可以,那么缩放到的最大和最小缩放比例是什么.使用ViewPort <meta>标记还表示文档针对移动设 ...
- USB3.0驱动与2.0有什么区别
安装好usb3.0驱动就可以驱动usb 3.0设备,能够适应于大部份主板,帮助用户解决usb3.0和电脑无法正常通讯的问题,并支持winxp,win7和win8系统,是目前网络上最好用的usb3.0万 ...
- js常用函数汇总（不定期更新）
1.图片按比例压缩 function setImgSize(){ var outbox_w=imgbox.width(), outbox_h=imgbox.height(); imgbox.find( ...
- SONA Topology
N多年以前就有有人设计传了一种类似“房子”状结构的拓扑图,在Cisco的文档中可以查到这种叫SONA.这是个非常神奇的设计,适合用于中小型网络,之所以这么讲,是因为在这个结构下,但凡任何一台接入层或者 ...
- 中间件事务码R3AC1里Block Size的含义
在中间件事务码R3AC1可以为一个中间件的适配器对象维护Block size的大小. 以上图的尺寸为50为例,假设在ERP系统里有110个设备(equipment)需要下载,那么CRM中间件会自动生成 ...
- Jerry的CRM Middleware(中间件)文章合集
我在SAP成都研究院做过的CRM中间件的项目其实并不是很多: 1. 2013年下半年和2014年上半年曾经支持过中联重科和蒙牛的CRM项目相关的中间件问题; 2. 2014年上半年做过一个CRM物料主 ...
- 关于c++对文件读写的封装
namespace { UINT_T GetWriteSizeForNoBuf(UINT_T fsize) { UINT_T write_buf_size = ; == ) { write_buf_s ...
- W5100与MCU的连接方式
W5100与MCU的连接方式 W5100与MCU的连接方式主要有直接总线连接.间接总线连接.SPI总线连接这三种连接方法,不同的连接方法适应于不同的场合,应该按需选择最恰当的连接方式. 1)直接总线连 ...
- 【转】Dalvik虚拟机的启动过程分析
在Android系统中,应用程序进程都是由Zygote进程孵化出来的,而Zygote进程是由Init进程启动的.Zygote进程在启动时会创建一个Dalvik虚拟机实例,每当它孵化一个新的应用程序进程 ...