在网页设计中经常要用到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. 在linux中设置静态ip地址

    在linux中设置静态ip地址1.在终端中输入:vi /etc/sysconfig/network-scripts/ifcfg-eth0 2.开始编辑,填写ip地址.子网掩码.网关.DNS等[root ...

  2. phantomjs 双向认证，访问nginx，https

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

  3. echarts3 -arcgis echarts.js修改

     在echarts.js中修改修改 clone 方法    其中 source instance of Array 修改为Object.prototype.toString.call(source)  ...

  4. 2016/11/17 周四 <javascript的封装简单示例>

    这是一个简单的javascript代码封装的示例以及封装后的调用方法: var ticker={ n:0, add:function() { this.n++; }, show:function() ...

  5. 工作总结_sql

    今天客户叫导入数据,因为存在特殊字符,快把我给玩死了,,所以请教...总结 sql 数据导入excel  存在特殊字符引起的数据缺失 利用字符方式    :   select  a.OpenID+', ...

  6. gulp + webpack + sass 学习

    笔记: new webpack.optimize.CommonsChunkPlugin 核心作用是抽离公共代码,chunks:['index.js','main.js'] 另一个作用就是单独生成一个j ...

  7. 使用Spring JdbcTemplate实现数据库操作

    今天我来演示 关于JDBCTemplate实现对数据库的查询和添加 首先是添加 第一步大家都知道 创建一个实体类 然后写一个方法 把实体类当参数传进去 在实现这个接口 JdbcDaoSupport这个 ...

  8. 《寒江独钓_Windows内核安全编程》中修改类驱动分发函数

    最近在阅读<寒江独钓_Windows内核安全编程>一书的过程中,发现修改类驱动分发函数这一技术点,书中只给出了具体思路和部分代码,没有完整的例子. 按照作者的思路和代码,将例子补充完整,发 ...

  9. Reactive Extensions(Rx) 学习

    Bruce Eckel(著有多部编程书籍)和Jonas Boner(Akka的缔造者和Typesafe的CTO)发表了“反应性宣言”,在其中尝试着定义什么是反应性应用. 这样的应用应该能够: 对事件做 ...

  10. JS实战 · 实践积累点滴杂烩

    onmouseover : 鼠标进入 onmouseout : 鼠标离开 onfocus:得到焦点   表单提交执行JS代码,有两种常用方式. 一:在局部(比如按钮定义处)用onclick=" ...