原生tab切换
<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>
原生tab切换的更多相关文章
- 原生tab切换(适用于购物商城中订单管理模块,例如:待付款/待发货/待收货等订单状态)
<!-- 头部tab栏切换 html部分--> <ul class="title-bar"> <li @click="changeStatu ...
- html 原生tab切换js
$("#ulId li").on('click', function () { $("#li-container").children().hide(); $( ...
- 原生JS实现tab切换--web前端开发
tab切换非常常见,应用非常广泛,比较实用,一般来说是一个网站必不可少的一个效果.例如:https://123.sogou.com/中的一个tab部分: 1.案例源代码 <!DOCTYPE ht ...
- 几种tab切换尝试 原生js
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- jQuery的DOM操作实例（1）——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- Tab切换类型
Tab切换类型 点击Tab 滑过Tab 延迟Tab CSS样式 ; ; list-style:none; font-size:12px;} .notice{width:298px; height:98 ...
- vue-router与v-if实现tab切换的思考
vue-router 该如何使用 忽然碰到一个常见的问题,明明可以使用 v-if / v-show 可以的解决的问题,有没有必要是使用 vue-router来解决. 比如常见的 tab 切换.一时间, ...
- 可重复使用Tab切换代码和纯js代码
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- 简单Tab切换
延迟Tab切换,使用css中的flex布局,原生js实现.(京东首页菜单也有此延迟功能哦!) 每天进步一丢丢~~ 1.延迟Tab切换 <!DOCTYPE html> <html la ...
随机推荐
- android学习9——Handler简单用法
Handler用来发消息和处理消息.典型的用法是更新界面.android不允许在子线程里面更新界面,通常是把Handler传到子线程中,在子线程里通过sendEmptyMessage函数发消息.Han ...
- Ancient Cipher UVa1339
这题就真的想刘汝佳说的那样,真的需要想象力,一开始还不明白一一映射是什么意思,到底是有顺序的映射?还是没顺序的映射? 答案是没顺序的映射,只要与26个字母一一映射就行 下面给出代码 //Uva1339 ...
- 规范 : jobbox 中英文
中英文是为了candidate 可以看到不同的post job 语言. e.g. 如果是contact person 的“designation” ,这个不会显示在post job 里,目的只是给em ...
- 每天一个Linux命令（05）--rm命令
自从学会了用mkdir创建目录之后,整个系统里就只能看到一堆空目录了,囧~ 那么今天我们来学一下如何清理这些空目录吧--rm命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录 ...
- Spring+SpringMVC+MyBatis+easyUI整合基础篇（七）JDBC url的连接参数
在java程序与数据库连接的编程中,mysql jdbc url格式如下: jdbc:mysql://[host:port],[host:port].../[database][?参数名1][=参数值 ...
- 去掉Dedecms幻灯片的标题文字和绿色背景
在操作dedecms站群中的站,因为看到首页的幻灯片Flash显示标题和文字,显得有点突兀,觉得应该去除dedecms 幻灯片默认的文字标题和背景,这样会感觉舒服些,下面教大家如何在模板当中去除ded ...
- 《深入理解Java虚拟机》学习笔记之最后总结
编译器 Java是编译型语言,按照编译的时期不同,编译器可分为: 前端编译器:其实叫编译器的前端更合适些,它把*.java文件转变成*.class文件,如Sun的Javac.Eclipse JDT中的 ...
- Java字节码操纵框架ASM小试
本文主要内容: ASM是什么 JVM指令 Java字节码文件 ASM编程模型 ASM示例 参考资料汇总 JVM详细指令 ASM是什么 ASM是一个Java字节码操纵框架,它能被用来动态生成类或者增强既 ...
- java线程学习(二)
多个线程并发抢占资源是,就会存在线程并发问题,造成实际资源与预期不符合的情况.这个时候需要设置"资源互斥". 1.创建资源,这个地方我创建了一个资源对象threadResource ...
- Java设计模式之《享元模式》及应用场景
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6542449.html 享元模式:"享"就是分享之意,指一物被众人共享, ...