在网页设计中经常要用到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. Python 爬虫1——爬虫简述

    Python除了可以用来开发Python Web之后,其实还可以用来编写一些爬虫小工具,可能还有人不知道什么是爬虫的. 一.爬虫的定义: 爬虫——网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区 ...

  2. 解决Android界面布局添加EditText组件后界面无法预览

    错误报告: Exception raised during rendering: java.lang.System.arraycopy([CI[CII)V Exception details are ...

  3. BFS/DFS算法介绍与实现（转）

    广度优先搜索(Breadth-First-Search)和深度优先搜索(Deep-First-Search)是搜索策略中最经常用到的两种方法,特别常用于图的搜索.其中有很多的算法都用到了这两种思想,比 ...

  4. [Android] 时间Time Date 以及Location中gettime

    import android.text.format.Time; 还有一个是Date Location中的gettime, 这几个每个默认的格式都不一样,直接输出字符串各自得到了不同 比如按照获取当前 ...

  5. OpenCV 3.1 Set Camera Resolution 设置相机的分辨率

    在OpenCV中,有强大的处理相机事件的api,但是貌似没有直接获取相机的最大分辨率的函数,通过属性CV_CAP_PROP_FRAME_HEIGHT和CV_CAP_PROP_FRAME_WIDTH直接 ...

  6. phpstudy虚拟机配置

    PHPStudy是一个常用的PHP本地环境搭建的一个程序包,方便实用.对学习PHP的新手来说, WINDOWS下环境配置是一件很困难的事;对老手来说也是一件烦琐的事.因此无论你是新手还是老手,该程序包 ...

  7. TP字母函数

    http://wenku.baidu.com/view/2a0ec9c13c1ec5da50e27099.html?from=search

  8. 工作总结_js

    工作至今已经有7个月了,虽然有进步,但是总感觉还是什么都不知道.可能这其中很大一部分还是与自己有关系,遇到自己不知道,问了人,或者百度到了,但是自己没有用心记.平时要用的时候,打开上一个项目,复制粘贴 ...

  9. composer安装

    1.首先到php.net下载对应版本的php,zip版本即可,注意windows需要vc11运行库支持 2.配置path路径添加对php解压目录的引用 3.将php.ini-development  ...

  10. etcd：用于服务发现的键值存储系统

    etcd是一个高可用的键值存储系统,主要用于共享配置和服务发现.etcd是由CoreOS开发并维护的,灵感来自于 ZooKeeper 和 Doozer,它使用Go语言编写,并通过Raft一致性算法处理 ...