在网页设计中经常要用到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. Debian 8 jessie, OpenSSH ssh connection server responded Algorithm negotiation failed

    安装了debian 8.5 就出问题了. root@debian8:~# lsb_release -aNo LSB modules are available.Distributor ID: Debi ...

  2. Python之路第一课Day9--随堂笔记之二(进程、线程、协程篇)

    本节内容 进程.与线程区别 python GIL全局解释器锁 线程 语法 join 线程锁之Lock\Rlock\信号量 将线程变为守护进程 Event事件 queue队列 生产者消费者模型 Queu ...

  3. js正则获取url所带参数值

    在js字符串对象原型中添加这个获取链接参数值方法,getAddrVal(): String.prototype.getAddrVal = String.prototype.getAddrVal||fu ...

  4. GeoIP Legacy City数据库安装说明

    Here is a brief outline of the steps needed to install GeoIP Legacy City on Linux/Unix. The installa ...

  5. mongodb搭建和基本语法

    下载安装包 https://fastdl.mongodb.org/win32/mongodb-win32-x86_64-2008plus-ssl-3.0.0-signed.msi?_ga=1.2206 ...

  6. PHP 文件处理

    $handler = fopen('./abc.html', 'w'); if(!feof($handler)){ // 读取文件末尾,也可以用file_exists mkdir('./abc.htm ...

  7. 【转】Apache 配置虚拟主机三种方式

    Apache 配置虚拟主机三种方式  原文博客http://www.cnblogs.com/hi-bazinga/archive/2012/04/23/2466605.html 一.基于IP 1. 假 ...

  8. 开放式管理基础结构 OMI

    Windows 长久以来在 CIM 实施领域一直傲立桥头,而这一切都是从 WMI(Windows 管理基础结构)开始的.分布式管理任务组 (DMTF) 通用信息模型 (CIM) 是一种开放式标准,用于 ...

  9. ABP理论学习之OData集成(新增)

    返回总目录 本篇目录 介绍 安装 创建控制器 例子 样例项目 介绍 OData在其官网的定义是: 允许以一种 简单且标准的方式创建和使用可查询的.可互操作的RESTful APIs. 在ABP中也可以 ...

  10. JavaScript面向对象之我见

    序言 在JavaScript的大世界里讨论面向对象,都要提到两点:1.JavaScript是一门基于原型的面向对象语言 2.模拟类语言的面向对象方式.对于为什么要模拟类语言的面向对象,我个人认为:某些 ...