原生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 ...
随机推荐
- 一期结业KTV项目难点
查询完成后给歌曲便利到一个数组当中将选中的歌曲对象加入到playlist类中的数组songs. 创建类名称: class Playlist { //定义一个长度为50的数组 ...
- html5 离线存储 地理信息与本地存储
搭建离线应用程序 ①服务器设置头信息 : AddType text/cache-manifest .manifest ② html标签加 : manifest=“xxxxx.manifest” ③写m ...
- Dev使用技巧
1. dev调试 I.建工程,选择console application II.设置断点(F4),并按F5,(完成输入后,)其它功能如Next line可运作 2. 修改字体大小:Tools-&g ...
- java基础：数组查询，同一数组一个元素最多出现两次
- Java豆瓣电影爬虫——模拟登录的前世今生与验证码的爱恨情仇
前言 并不是所有的网站都能够敞开心扉让你看个透彻,它们总要给你出些难题让你觉得有些东西是来之不易的,往往,这也更加激发你的激情和斗志! 从<为了媳妇的一张号,我与百度医生杠上了>里就有网友 ...
- 注册登录系统项目思路 -- javaweb
功能: > 注册 > 登录 --------------------------------- JSP: * login.jsp --> 登录表单 * re ...
- JAVA高级总结
一.集合框架和泛型 1.集合框架 1) 定义:JAVA API的一部分,用于处理一组长度可变得数据. 2) 和数组的区别: 数组的长度不可变,但是集合框架处理的数据长度可以动态变化. 3) 结构: 接 ...
- ThinkPhp框架：验证码功能
Think\Verify类可以支持验证码的生成和验证功能. 为了显示这个验证码功能,第一要有控制器,再就是有方法,然后是显示的页面. 一.最简单的方式生成验证码 (1)我们还是继续在那个控制器编写方法 ...
- JS中undefined与null的有趣 关系
今天学习中遇到了一个有意思的问题. var obj = undefined 我们将一个对象设置为undefined typeof(obj)>>undefined 结果是undefined, ...
- .dll 无法查找或者打开PDB文件
https://www.baidu.com/link?url=XBkzyMPU8bmyHSKAvBde6955fX2ecFJXfk8D44_VCuH_4U04E0bHFjk8D2_mXSqgjcUyQ ...