原生js实现tab切换
//通过原生js实现table切换
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡</title>
<style type="text/css">
.main {width:400px; margin:0 auto;}
#title {height:30px; line-height:30px;}
#title span {float:left; width:120px; height:30px; margin-right:5px; color:#333; background:#eee; text-align:center; cursor:pointer; font-weight:bold;}
#title span.on {background:#333; color:#fff;}
#con {background:#fafafa; height:200px; border-top:2px solid #333;}
#con ul {display:none; padding:10px;}
#con ul.on {display:block;}
#con ul li {height:24px; line-height:24px; border-bottom:1px dotted #ccc; text-indent:10px;}
</style>
</head>
<body>
<div class="wrapper">
<h1>原生javascript效果：选项卡切换</h1>
<div class="main">
<h4 id="title">
<span class="on">jquery</span>
<span>javascript</span>
<span>css</span>
</h4>
<div id="con">
<ul class="on">
<li><a href="#">jquery选项卡</a></li>
<li><a href="#">jquery焦点图</a></li>
<li><a href="#">jquery表单验证</a></li>
<li><a href="#">jquery特效</a></li>
</ul>
<ul>
<li><a href="#">原生javascript</a></li>
<li><a href="#">javascript特效</a></li>
<li><a href="#">javascript笔记</a></li>
</ul>
<ul>
<li><a href="#">css sprites</a></li>
<li><a href="#">css命名规则</a></li>
<li><a href="#">css font属性</a></li>
<li><a href="#">css background属性</a></li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
var oTitle = document.getElementById('title');
var aSpan = oTitle.getElementsByTagName('span');
var oCon = document.getElementById('con');
var aUl = oCon.getElementsByTagName('ul');
var i = 0;
for(i=0; i<aSpan.length; i++) {
aSpan[i].index = aUl[i].index = i;
aSpan[i].onclick = function () {
for(i=0; i<aSpan.length; i++) {
aSpan[i].className = '';
aUl[i].className = '';
}
this.className = 'on';
aUl[this.index].className = 'on';
}
}
</script>
</body>
</html>
原生js实现tab切换的更多相关文章
- 原生JS实现tab切换--web前端开发
tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- 原生js实现tab选项卡
1.html部分 <body> <div id="tab"> <div class="tab_menu& ...
- JS实现Tab切换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Vue.js实现tab切换效果
利用Vue实现简易tab切换效果 1.1 在我们平时浏览网站的时候,经常看到的特效有图片轮播.导航子菜单的隐藏.tab标签的切换等等.这段时间学习了vue后,开始要写出一些简单的特效. 1.2 实现思 ...
- Js 实现tab切换效果
今天商城系统的后台要添加一个Tab切换的效果,一开始没有思路想要自己去实践这个效果 从网上找jquery 已经有了很好看的案例,实现之后我来学习下思路是如何完成的
- js Tab切换实例
js 实现 tab 切换 实现如下效果: 1.图片每1秒钟切换1次. 2.当鼠标停留在整个页面上时,图片不进行轮播. 3.当点击切换页的选项上时,出现该选项的对应图片,而且切换页选项的背景颜色发生相应 ...
- jQuery的DOM操作实例（1）——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- JavaScript实现Tab切换
在网页开发中,常常会遇见很多Tab切换,Tab切换增加网页浏览的舒适性,对于开发人员特别常见,本文使用JS实现tab切换效果,仅对学习中遇到的知识点做一个总结. 效果图如下: 实现思路: 1. ...
随机推荐
- Redis【第一篇】安装
第一步:准备 1. 操作系统 CentOS-7-x86_64-Everything-1511 2. redis 版本 redis-3.2.8 3. 修改内核参数 有三种方式: 1)编辑/etc/sys ...
- JavaScript中的函数使用
append() 是代表改变格子的内容 prev()是代表前一个格子 next()是代表下一个相邻的格子 hide()是代表隐藏 show()是代表显示 childen()是代表子节点 eq()是代表 ...
- JVM——深入分析对象的内存布局
概述 一个对象本身的内在结构需要一种描述方式,这个描述信息是以字节码的方法存储在方法区中的.Class本身就是一个对象,都以KB为单位,如果new Integer()为了表示一个数据就占用KB级别的内 ...
- iOS 图片裁剪方法
iOS 图片裁剪方法 通过 CGImage 或 CIImage 裁剪 UIImage有cgImage和ciImage属性,分别可以获得CGImage和CIImage对象.CGImage和CIImage ...
- 第23篇 js快速学习知识
前面说了js的一些高级方面的基础知识,这些都是比较容易出错的和比较难理解的东西,除了这些之外其它的知识都比较简单了,基础学好了,扩展起来就是小意思.今天说说js方面可以快速学习和入门的知识. 1.闭包 ...
- TypeScript设计模式之单例、建造者、原型
看看用TypeScript怎样实现常见的设计模式,顺便复习一下. 单例模式 Singleton 特点:在程序的生命周期内只有一个全局的实例,并且不能再new出新的实例. 用处:在一些只需要一个对象存在 ...
- iOS下的界面布局利器-MyLayout布局框架
Swift:TangramKit: https://github.com/youngsoft/TangramKit OC:MyLayout: https://github.com/youngsof ...
- iTunes Documents 文件共享指导手册
金田 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; min-height: 13.0px } p.p2 { margi ...
- Apache Flume日志收集系统简介
Apache Flume是一个分布式.可靠.可用的系统,用于从大量不同的源有效地收集.聚合.移动大量日志数据进行集中式数据存储. Flume简介 Flume的核心是Agent,Agent中包含Sour ...
- 温故而知新——map
map :关联式容器,使用时是以属性值对的方式进行使用,例如:<key,value>.map key值唯一,相同的key值插入时只会保留一个.除此之外,map的特点还包括:1.map底层 ...