在网页设计中经常要用到tab切换，遂整理了一下常用的两种方法。

先看一下示例代码：

HTML：

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>tab</title>

	<style>

	*{

		margin: 0;

		padding: 0;

	}

	#title{

		width: 306px;

		overflow: hidden;

		margin: 50px auto 0px;

	}

	#title h2{

		width: 100px;

		height: 30px;

		border: 1px solid #000;

		font-size: 30px;

		text-align: center;

		line-height: 30px;

		float: left;

	}

	#con{

		width: 304px;

		border: 1px solid #000;

		height: 200px;

		margin: 0 auto;

	}

	#con li{

		width: 304px;

		height: 200px;

		font-size: 40px;

		color: #ccc;

		line-height: 200px;

		text-align: center;

		list-style: none;

		display: none;

	}

	.select{

		background: #ccc;

	}

	#con .show{

		display: block;

	}

	</style>

</head>

<body>

	<div id="title">

		<h2 class="select" >标题一</h2>

		<h2>标题二</h2>

		<h2>标题三</h2>

	</div>

	<ul id="con">

		<li class="show">内容一</li>

		<li>内容二</li>

		<li>内容三</li>

	</ul>

</body>

<script></script>

</html>

两种方法的主要区别是在js代码中，第一种是给每个点击对象一个下标，方便操作：

<script type="text/javascript">

    var title=document.getElementById('title');

    var hs=title.getElementsByTagName('h2');

    // alert(hs.length);

    var con=document.getElementById('con');

    var lis=con.getElementsByTagName('li');

//for循环的作用是给每一个hs绑定一个点击事件，

    for (var i = 0; i < hs.length; i++) {

        hs[i].index=i;

        hs[i].onclick=function() {

            // alert(this);

            for (var v = 0; v < hs.length;v++) {

                hs[v].className='';

                lis[v].className='';

            };//清除所有的类名

            this.className='select';

            lis[this.index].className='show';

        };

    };

</script>

第二种方法是通过判断点击对象与展示对象的变量值相等时，进行操作。要注意用到关键字this。

<script>

    var title=document.getElementById('title');

    var hs=title.getElementsByTagName('h2');

    // alert(hs.length);

    var con=document.getElementById('con');

    var lis=con.getElementsByTagName('li');

    for (var` i = 0; i < hs.length; i++) {

        //第一个for循环是给每一个h2都绑定一个点击事件

        hs[i].onclick=function() {

            for (var v = 0; v < hs.length; v++) {

                //第二个for循环是去遍历判断哪一个是当前点击的对象

                if (hs[v]==this) {

                    hs[v].className='select'

                    lis[v].className='show';

                }else{

                    hs[v].className='';

                    lis[v].className='';

                }

            }

        }

    }

</script>

JavaScript的Tab切换的更多相关文章

  1. JavaScript实现Tab切换

    在网页开发中,常常会遇见很多Tab切换,Tab切换增加网页浏览的舒适性,对于开发人员特别常见,本文使用JS实现tab切换效果,仅对学习中遇到的知识点做一个总结. 效果图如下:     实现思路: 1. ...

  2. 怎么用JavaScript实现tab切换

    先看一下代码实现后的最终效果: 用JavaScript实现思路很简单,就是先把所有的内容隐藏,点击标题对应的内容显示, css代码如下: <style type="text/css&q ...

  3. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  4. 实用CSS3属性之 :target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...

  5. javascript回车完美实现tab切换功能

    javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel ...

  6. javascript学习教程之---如何从一个tab切换到banner幻灯片的转换

    一个简单的tab切换代码: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  7. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. JavaScript学习笔记2之Tab切换

    1.Tab切换简写版1 页面布局如下: <div id="tab"> <h1 id="title"> <span class=&q ...

  9. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

随机推荐

  1. Java技术体系图

    Java程序员高级特性              反射.泛型.注释符.自动装箱和拆箱.枚举类.可变              参数.可变返回类型.增强循环.静态导入        核心编程       ...

  2. int.Parse()之异常

    首先对不起各位读者,我必须发泄一下,为了清明节能顺利的去洛阳玩,我周四赶出了一篇博客,就在快写完提交的时刻,11:30分断网了!!断网了!!断!!网!!了!!是的,你没有听错,他就这样毫无征兆的断网了 ...

  3. 关于.9.png格式图片的制作与使用

    .9.png图片其实就是png格式图片,不过它比普通的png图片外围多了1px(像素)的边框,另外就是使用这种格式的图片可以实现背景自适应大小且不失真的效果. 制作使用步骤: 1.制作属于你自己的pn ...

  4. 步骤进度条 css

    用css写一个简单的步骤进度条 html代码: <h4>南京游玩</h4> <ul class="step-list"> <li> ...

  5. 【OAuth2.0】Spring Security OAuth2.0篇之初识

    不吐不快 因为项目需求开始接触OAuth2.0授权协议.断断续续接触了有两周左右的时间.不得不吐槽的,依然是自己的学习习惯问题,总是着急想了解一切,习惯性地钻牛角尖去理解小的细节,而不是从宏观上去掌握 ...

  6. Smart3D系列教程6之 《案例实战演练3——倾斜数据正射影像及DSM的生产》

    一.前言 Wish3D出品的系列教程中,前面两讲分别讲述说明了小物件的照片三维重建.大区域地形的三维重建,从照片的直接导入至软件到通过Excel表格将区块导入处理,从不同的模型类别.不同的导入方式演示 ...

  7. DOM2级提供的对DOM结构执行深度优先遍历 笔记

    NodeIterator和TreeWalker这2个类型可以基于给定的起点对DOM结构执行深度优先遍历.(我测试用的浏览器是Chrome,介绍说IE不支持DOM遍历,但是不知道最新的IE支持不支持) ...

  8. VS上关于找不到程序集的问题

    第一次重新装了次vs再次导入以前写的项目发现找不到程序集,出现很多的警告和错误,并且代码里好多都是显示红色的 第二次乱动了下又出现此问题 记录下解决的方案和一些相关的问题方案 1.引用一个DLL,需要 ...

  9. Swift 3 and OpenGL on Linux and macOS with GLFW

    https://solarianprogrammer.com/2016/11/19/swift-opengl-linux-macos-glfw/ Swift 3 and OpenGL on Linux ...

  10. 免费SVN服务器笔记

    前言: 笔者有个项目,需要类似公司一样进行源代码管理.鉴于很多团队一样,对资金资源限制,只能寻找免费的SVN服务器 于是在BD上搜索一大推资料,很多都是google的,但是GG经常无法正常访问,给项目 ...