tab切换实现方式2：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>tab切换2回顾</title>

	<style>

		* {

			margin: 0;

			padding: 0;

			list-style: none;

		}

		#wrap {

			width: 600px;

			margin: 100px auto 0;

			overflow: hidden;

		}

		#tit {

			height: 30px;

		}

		#tit span {

			float: left;

			width: 200px;

			height: 30px;

			line-height: 30px;

			text-align: center;

			font-size: 18px;

			background: #ccc;

		}

		#tit span.select {

			background: #333;

			color: #ccc;

		}

		#con {

			width: 560px;

			padding: 20px;

			overflow: hidden;

			background: pink;

		}

		#con li {

			height: 200px;

			line-height: 200px;

			text-align: center;

			font-size: 100px;

			display: none;

		}

		#con li.show {

			display: block;

		}

	</style>

</head>

<body>

	<div id="wrap">

		<div id="tit">

			<span class="select">选项一</span>

			<span>选项二</span>

			<span>选项三</span>

		</div>

		<ul id="con">

			<li class="show">1111</li>

			<li>2222</li>

			<li>3333</li>

		</ul>

	</div>

	<script>

		var tit = document.getElementById('tit');

		var con = document.getElementById('con');

		var spans = tit.children;

		var lis = con.children;

		// console.log(lis.length);

		for (var i = 0; i < spans.length; i++) {

			spans[i].onclick = function() {

				for (var i = 0; i < spans.length; i++) {

					if(spans[i] == this) {

						this.className = 'select';

						lis[i].className = 'show';

					}else {

						spans[i].className = '';

						lis[i].className = '';

					}

				}

			}

		}

	</script>

</body>

</html>

　　

tab切换实现方式2的更多相关文章

  1. tab切换实现方式1

    tab切换实现方式1: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  2. 【原】react做tab切换的几种方式

    最近搞一个pc端的活动,搞了一个多月,甚烦,因为相比于pc端,更喜欢移动端多一点.因为移动端又能搞我的react了. 今天主要总结一下react当中tab切换的几种方式,因为tab切换基本上都会用到. ...

  3. vue中echarts 在element-ui的tab 切换时 width 为100px 时的解决方式

    最近在项目中遇到了这种情况,需要在tab控件上渲染多个echart图标,然后切换查看时,发现图表的宽度不正确 原因:在页面进行加载时,隐藏的图表找不到对应的div大小,所以默认给了一个大小.所以要做的 ...

  4. 案例(拖拽对话框、高清放大镜、自制滚动条、元素的隐藏方式、表格隔行变色、tab切换效果、字符串拼接、刷新评论)

    一.拖拽对话框 <style> .of{ width: 500px; } #link,#close{ text-decoration: none; margin: 0 10px; font ...

  5. 谈谈一些有趣的CSS题目（八）-- 纯CSS的导航栏Tab切换方案

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  6. javascript回车完美实现tab切换功能

    javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel ...

  7. 很好用的Tab标签切换功能，延迟Tab切换。

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

  8. Android Studio精彩案例(二)《仿微信动态点击底部tab切换Fragment》

    转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 现在很多的App要么顶部带有tab,要么就底部带有tab.用户通过点击tab从而切换不同的页面(大部分情况时去切换fragment). ...

  9. TabLayout：另一种Tab的实现方式

    http://blog.csdn.NET/aigestudio/article/details/47155769 在5.0以前我们想要实现像网易新闻客户端那样的的Tab可以有很多种选择: 比如古老的T ...

随机推荐

  1. ZooKeeper实践：（2）集群管理

    前言: 随着业务的扩大,用户的增多,访问量的增加,单机模式已经不能支撑,从而出现了从单机模式->垂直应用模式->集群模式,集群模式诞生了,伴随着一堆问题也油然而生,Master怎么选举,机 ...

  2. Item 27: 明白什么时候选择重载，什么时候选择universal引用

    本文翻译自<effective modern C++>,由于水平有限,故无法保证翻译完全正确,欢迎指出错误.谢谢! 博客已经迁移到这里啦 Item 26已经解释了,不管是对全局函数还是成员 ...

  3. SparkMLib分类算法之朴素贝叶斯分类

    SparkMLib分类算法之朴素贝叶斯分类 (一)朴素贝叶斯分类理解 朴素贝叶斯法是基于贝叶斯定理与特征条件独立假设的分类方法.简单来说,朴素贝叶斯分类器假设样本每个特征与其他特征都不相关.举个例子, ...

  4. 【转】典型的JavaScript面试题

    问题1: 作用域(Scope) (function() { "use strict"; var a = b = 5; })(); console.log(b); 控制台(conso ...

  5. 《Android进阶》之第六篇 Fragment 的使用2

    最近通过学习,对fragment的使用有了新的认识. 一开始接触android的时候,很是受不了这个fragment,总感觉它把一个简单的事情搞复杂啦,所以每次新建工程的时候总是固执的选择empty ...

  6. 开涛spring3(9.1) - Spring的事务 之 9.1 数据库事务概述

    9.1  数据库事务概述 事务首先是一系列操作组成的工作单元,该工作单元内的操作是不可分割的,即要么所有操作都做,要么所有操作都不做,这就是事务. 事务必需满足ACID(原子性.一致性.隔离性和持久性 ...

  7. 初识mysql

    一直想试试mysql,但是却一直没有正式的使用过它,也许是因为第一次安装时忘记了root密码,折腾太久留下的后遗症吧,总有点怕怕的.今天第一次使用命令行创建了数据库和数据表,虽然是简单的不能再简单的数 ...

  8. 在Eclipse IDE使用Gradle构建应用程序

    文 by / 林本托 Tips 做一个终身学习的人. 1. 下载和配置Gradle Gradle Inc.是Gradle框架开发的公司,为Eclipse IDE提供了Gradle工具的支持. 此工具可 ...

  9. 兼容ie浏览器的placeholder的几种方法

    项目中遇到的问题,试了几种方法,今天整理出来,如果有不合适的地方,希望大家多多提意见. 第一种方法是:使用html新增的属性 “data-”来实现的,实现的时候,input框没有使用placehole ...

  10. nodejs 开发指南 书中小项目 代码

    最近 在学习node.js 先看了下语法 ,然后就看这个开发指南感觉书还是很有用,但是代码太旧了,网上也没有最新的,所以就自己查着前人的痕迹和自己修改,现在可以跑了. https://github.c ...