说道tab选项卡,顾名思义，就是切换不同内容分类，想必学过前端的都知道，tab有很多方法可以实现，最近刚跟师傅学了一种，感觉很简便，很实用哦。 

 

一、先看一下结果

二、可以根据图来布局，首先上面标签和下面内容，

需要注意的是点击上面a标签的链接和下面div的id一一对应起来，

 

三、就是最重要的js部分了。

 

　　这个地方可以分几个阶段去思考

　　　　1.首先得有事件去触发点击

　　　　　　　

　　　　2.获取与内容对应a标签的href,这样就可以对下面进行显示或隐藏，

　　　　　　

　　　　3.通过唯一的class  -->  active   来切换你想要的内容

　　　　　　

四、加上css,这样就差不多完成了

　　这里根据需求自己定吧，重点在js

五、这样一个简单的小程序差不多就完成了。但是自己写的代码得负责到底，所以测试也是相当重要的，

　　　　1.首先，点击的选项会有偏差，所以我们要适当的加些判断，只有点击A标签的时候才能触发

　　　　　　

　　　　　　注意：tagName 一定要大写    比如：A  标签    

　　　　2.还有一个地方需要优化，你会发现，现在在第一个标签上，如果在点击当前的，程序还会执行一遍，虽然你看不到，所一这个最好优化一下

　　　　　　

　　　　　　　　点击的时候先判断一下就好啦。

 

下面附上我的源码，希望大家一起学习。请大家多多指教，随时留言回复，

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<title>tab选项卡</title>

		<style type="text/css">

			*{

				font-family: simhei;

			}

			.tab-group{

				padding: 1em 0em;

			}

			.tab-group>a{

				padding: 1em 2em;

				color: #666;

				text-decoration: none;

			}

			.tab-group>.active{

			    padding: 1em 2em;

			    background: #999;

			    color: #fff;

			}

			.content-group{

		        width: 31.7%;

			    height: 10em;

			    background: #999;

			    color: #fff;

			}

			.content-group>.content-item{

				display: none;

			}

			.content-group>.active{

				display: inline-block;

			}

		</style>

	</head>

	<body>

		<nav class="tab-group">

			<a href="item01" class="tab-item active">电脑</a>

			<a href="item02" class="tab-item">手机</a>

			<a href="item03" class="tab-item">平板</a>

		</nav>

		<div class="content-group">

			<div class="content-item active" id="item01">联想</div>

			<div class="content-item" id="item02">小米</div>

			<div class="content-item" id="item03">苹果</div>

		</div>

	</body>

</html>

<script type="text/javascript">

	document.querySelector(".tab-group").addEventListener('click',function(event){

		var target = event.target;

		//点击选项

		if(target.tagName === 'A' && ~target.className.indexOf('tab-item')){

			event.preventDefault();

			if(~target.className.indexOf('active')){

				return;

			}

			var href = target.getAttribute('href');//获取点击的目标标志

			//TODO 切换选项

			var activeTab = document.querySelector(".tab-group>.active");

			activeTab.className = activeTab.className.replace(' active', '');

			target.className = target.className + ' ' + "active";

			//TODO 选项对应的内容切换

			var activeContent = document.querySelector('.content-group>.active');

			activeContent.classList.remove('active');

			var contentElem = document.getElementById(href);

			contentElem.classList.add("active");

		}

	},false);

</script>

　　

js-tab选项卡的更多相关文章

  1. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  2. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

  3. js 实现tab选项卡

    最近一直在研究js  如果不及时复习的话前边学到的东西很快就会忘掉,所以把前段时间的一个简单的tab选项卡的思路写出来也算复习了一下吧, 第一步:先把布局写出来: <div id="d ...

  4. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  5. 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

  6. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  7. tab选项卡-jQuery

    上次用原生的js写了个tab选项卡   这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...

  8. react tab选项卡切换

    Tab选项卡切换是个很常见也很简单的小功能,用原生js和jq去写的话可能不到20行代码就搞定so easy.但是用react去实现就没那么容易了(是自己react比较菜).由于最近在重新学习react ...

  9. 移动web：tab选项卡

    平常做移动端会用到tab选项卡,这和PC端有些区别,移动端是触摸滑动切换,PC端是点击.移入切换. 这里滑动切换就是一个移动端事件的应用,这里主要用到的触摸事件:touchstart.touchmov ...

  10. css Tab选项卡1

    利用   锚点原理 以及overflow:hiden 结合,实现纯  css  tab 方式 兼容ie6 + 适合单个tab   不需要js          注意点  红色方框的   a 对应a   ...

随机推荐

  1. November 11th 2016 Week 46th Friday

    Keep in mind that neither success nor failure is ever final. 无论成败,皆非定局. The final is not coming, but ...

  2. Git for Windows 工具下载及配置

    前言,关于git工具的帖子:http://cn.v2ex.com/t/225027 最终选择了git for windows这个工具,路径为:https://git-for-windows.githu ...

  3. 一个php开发的用于路由器的小功能

    最近接到一个需求,假设有A.B.C 三台主机.现A主机要访问C主机上的一个脚本,并且根据A传递的参数给C主机,同时接受C主机返回来的数据.但是现在A主机不能直接通过url.IP访问C主机,需要借由主机 ...

  4. stm32实现待机唤醒

    STM32的低功耗模式有3种:1.睡眠模式(CM3内核停止,外设仍然运行)2.停机模式(所有时钟都停止)3.待机模式(1.8v内核电源关闭) 进入待机模式的方法,以及设置WK_UP引脚用于把STM32 ...

  5. iOS 之 关闭键盘

    //方法一:关闭整个系统的键盘 [[[UIApplication sharedApplication] keyWindow] endEditing:YES]; //方法二:关闭当前页的键盘 [[sel ...

  6. Linux系统迁移

    文章来源http://blog.csdn.net/gt945/article/details/12253585 sudo rsync -aAXvP --exclude-from=exclude.txt ...

  7. awakeFromNib与initWithCoder

  8. 高斯RBF核函数中Sigma取值和SVM分离面的影响

    1:高斯RBF核函数的定义 k(x) = exp(-x^2/(2×sigma)) 在MATLAB中输入一下代码:ezsurf('exp(-x^2/(2*sigma^2))'); 在GOOGLE中输入“ ...

  9. CSS继承性和层叠性

    一. 继承性    1. 含义:从自己开始直到所包裹的最小的元素,都可以继承一些特有的属性.    2. 作用范围:  a. color.text-开头的.line-开头的.font-开头的,均可以继 ...

  10. Oracle优化：千万级大表逻辑判断的累赘

    insert into pntmall_point_detail(PNTMALL_PNT_ID,PNTMALL_PNT_DT,PNTMALL_VALIDITY,PNTMALL_LASTUPDATEDT ...