在网页设计中经常要用到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. phantomjs 双向认证，访问nginx，https

    应用背景: phantomjs的一个爬虫,访问https站点,单向认证(只认证服务器身份)的都可以,双向认证(服务器和客户端都需要认证)必须上传本地证书: 开始用一个包含公钥私钥的PEM证书访问,怎么 ...

  2. HTML5新特性——HTML 5 Canvas vs. SVG

    Canvas 和 SVG 都允许您在浏览器中创建图形,但是它们在根本上是不同的. SVG SVG 是一种使用 XML 描述 2D 图形的语言. SVG 基于 XML,这意味着 SVG DOM 中的每个 ...

  3. 自定义 TableViewCell 的分割线

    刚开始自定义 tableViewCell 的时候,用的是直接在 cell 上加一张 imageView 的方法,如果在点击 cell 的时候有页面的跳转,这样做没什么问题,但是,如果在点击 cell ...

  4. Search in Rotated Sorted Array

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  5. 字符串、数组方法实战--charAt()，split(),indexOf(),substring()

    这篇随笔根据两个面试题来实战一下数组.字符串的一些方法. 题一:一个字符串中找出出现次数最多的字符次数 var str = 'fuuhuhuhufaihuhfnkjNKCNIO';
 function ...

  6. 判断是PC端还是移动端

    http://detectmobilebrowsers.com/ 此网站提供了各种编程语言(包括 Apache.ASP.ASP.NET.C#. IIS. JSP. JavaScript. jQuery ...

  7. SQL Server 事件通知（Event notifications）

    一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 基础知识(Rudimentary Knowledge) 事件通知监控DDL(NotifyQue ...

  8. HDFS 与 GFS 的设计差异

    后端分布式系列」前面关于 HDFS 的一些文章介绍了它的整体架构和一些关键部件的设计实现要点. 我们知道 HDFS 最早是根据 GFS(Google File System)的论文概念模型来设计实现的 ...

  9. 微软StockTrader应用程序

    这是一个采用 .NET Enterprise Application Server 技术的端到端示例应用程序.应用程序代码可以从 这里 下载. 代码中演示了WCF服务和移动开发,包括用Xamarin ...

  10. 一个小白App开发需要了解的基本技术

    本文针对小白用户对App做一个简单的介绍,首先要了解App都有哪些类型,不同的类型适用于哪些需求,用户可以根据自己的需求选择不同的App开发. 一 App有哪些形式 WebApp:简单来说,Web A ...