JS初学之-选项卡（常见）
思路：鼠标滑过的效果直接用a:hover实现的，比较简便，缺点是在IE下不兼容。
为每一个Li添加点击事件，将每一个li用自定义属性的方法与div相匹配，重点是在点击事件内，要先遍历每一个div,使之display:none，然后在事件外写每一个div display:block;这就是所谓的思路：
1、全部清空，当前添加
for(var i=0;i<aBtn.length;i++){
aBtn[i].className='';
};
this.className='active';
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{padding:0;margin:0;}
a{text-decoration:none;}
li{list-style:none;}
.clear:after{content:"";display:block;clear:both;}
.clear{zoom:1;}
#box{width:765px;margin:0 auto;font-size:12px;padding:15px 19px 0 6px;background:#fdf8f1;}
#box h2{font-size:15px;color:867c7b;}
.head{border-bottom:2px solid transparent;}
.head li{width:100px;height:23px;line-height:23px;text-align:center;float:left;margin-left:1px;background:#eaddcc;margin-top:7px;}
.head:hover{border-bottom:2px solid #806f66;}
.head a{color:#595959;display:block;}
.head a:hover{background:#806f66;color:#fff;}
#box div{width:520px;padding:16px 69px 20px 97px;background:url(images/images/images/2-tmall_03.jpg) no-repeat 35px 19px;line-height:20px;border-top:1px solid #e3e3e3;display:none}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('box');
var oUl=oDiv.getElementsByTagName('ul')[0];
var aLi=oUl.getElementsByTagName('li');
var aDiv=oDiv.getElementsByTagName('div');
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onclick=function(){
for(var i=0;i<aDiv.length;i++){
aDiv[i].style.display='';
};
aDiv[this.index].style.display='block';
};
};
};
</script>
</head>
<body>
<div id="box">
<h2>消息盒子</h2>
<ul class="head clear">
<li><a href="javascript:;">未读</a></li>
<li><a href="javascript:;">全部</a></li>
<li><a href="javascript:;">我的成长</a></li>
<li><a href="javascript:;">特权活动</a></li>
<li><a href="javascript:;">系统消息</a></li>
<li><a href="javascript:;">其他</a></li>
</ul>
<div style="display:block">
<p><strong>天猫俱乐部：未读</strong> </br>
<span style="color:#666; font-weight:bold">天猫达人经验值发放成功</span> <span style="color:#666" >您上个月购买天猫产品，总共获得1600点天猫达人经验值，已经发放成功！查看天猫达人值经验请</span>
<a href="#"><strong style="color:#806f66;text-decoration:underline">点此查看</strong></a> </br>
<span style="color:#b5b4b3; line-height:30px;">2013年10月3日</span>
</p>
</div>
<div>
<p><strong>天猫俱乐部：全部</strong> </br>
<span style="color:#666; font-weight:bold">天猫达人经验值发放成功</span> <span style="color:#666" >您上个月购买天猫产品，总共获得1600点天猫达人经验值，已经发放成功！查看天猫达人值经验请</span>
<a href="#"><strong style="color:#806f66;text-decoration:underline">点此查看</strong></a> </br>
<span style="color:#b5b4b3; line-height:30px;">2013年10月3日</span>
</p>
</div>
<div>
<p><strong>天猪俱乐部：我的成长</strong> </br>
<span style="color:#666; font-weight:bold">天猫达人经验值发放成功</span> <span style="color:#666" >您上个月购买天猫产品，总共获得1600点天猫达人经验值，已经发放成功！查看天猫达人值经验请</span>
<a href="#"><strong style="color:#806f66;text-decoration:underline">点此查看</strong></a> </br>
<span style="color:#b5b4b3; line-height:30px;">2013年10月3日</span>
</p>
</div>
<div>
<p><strong>天猪俱乐部：特权活动</strong> </br>
<span style="color:#666; font-weight:bold">天猫达人经验值发放成功</span> <span style="color:#666" >您上个月购买天猫产品，总共获得1600点天猫达人经验值，已经发放成功！查看天猫达人值经验请</span>
<a href="#"><strong style="color:#806f66;text-decoration:underline">点此查看</strong></a> </br>
<span style="color:#b5b4b3; line-height:30px;">2013年10月3日</span>
</p>
</div>
<div>
<p><strong>天猪俱乐部：系统消息</strong> </br>
<span style="color:#666; font-weight:bold">天猫达人经验值发放成功</span> <span style="color:#666" >您上个月购买天猫产品，总共获得1600点天猫达人经验值，已经发放成功！查看天猫达人值经验请</span>
<a href="#"><strong style="color:#806f66;text-decoration:underline">点此查看</strong></a> </br>
<span style="color:#b5b4b3; line-height:30px;">2013年10月3日</span>
</p>
</div>
<div>
<p><strong>天猪俱乐部：其他</strong> </br>
<span style="color:#666; font-weight:bold">天猫达人经验值发放成功</span> <span style="color:#666" >您上个月购买天猫产品，总共获得1600点天猫达人经验值，已经发放成功！查看天猫达人值经验请</span>
<a href="#"><strong style="color:#806f66;text-decoration:underline">点此查看</strong></a> </br>
<span style="color:#b5b4b3; line-height:30px;">2013年10月3日</span>
</p>
</div>
</div>
</body>
</html>
JS初学之-选项卡（常见）的更多相关文章
- JS初学之-选项卡（图片切换类）
初学选项卡,主要问题卡在了索引值上面,花了较长的时间学习. 索引值其实很好理解,就是为每一个元素用JS的方法添加一个属性,即自定义属性. 在for循环里的函数里用i,会直接弹出这个数组的length, ...
- 原生js实现tab选项卡里内嵌图片滚动特效代码
<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...
- Node.js初学
Node.js 初学~ 其技术上最大的卖点是非阻塞的I/O和基于事件的异步处理机制. 后端没有什么深入研究,一直对其不是很了解. 透过一个例子看 非阻塞 与 通常的 阻塞 var text = rea ...
- 【JS中循环嵌套常见的六大经典例题+六大图形题，你知道哪几个？】
首先,了解一下循环嵌套的特点:外层循环转一次,内层循环转一圈. 在上一篇随笔中详细介绍了JS中的分支结构和循环结构,我们来简单的回顾一下For循环结构: 1.for循环有三个表达式,分别为: ①定义循 ...
- JS中几种常见的数组算法（前端面试必看）
JS中几种常见的数组算法 1.将稀疏数组变成不稀疏数组 /** * 稀疏数组 变为 不稀疏数组 * @params array arr 稀疏数组 * @return array 不稀疏的数组 */ f ...
- 纯CSS3完成选项卡，不要js完成的选项卡
我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天就来敲一敲,选项卡,注意哦,不是一般利用js完成的选项卡,今天是纯用HTML和CSS来完成的,这怎么可能?那你不用js的点击事件,怎么处理? ...
- node.js 初学（二）—— 搭建注册/登录服务器
node.js 初学(二)—— 搭建注册/登录服务器 理论上来说,代码实现在理论和实际上是一样的.但实际上来说,他们不是 做一个最简单的用户注册登录功能 1.接口定义: 注册:/user?act=re ...
- node.js 初学（一）—— http fs 服务器/文件/post get
node.js 初学 —— http fs 服务器/文件/post get 这个世界,从来不会给失败者颁奖! 了解 node.js (开源) node.js 是用来做后台开发的,但是现在大部分前端人员 ...
- js进阶 11-22/23 js如何实现选项卡
js进阶 11-22/23 js如何实现选项卡 一.总结 一句话总结:通过索引把选项卡头的li标签和选项卡内容的div标签联系在一起,通过控制div标签的display属性可以实现选项卡的选项切换. ...
随机推荐
- 【同行说技术】Python程序员小白变大神必读资料汇总（ 三）
在文章<Python开发.调试.爬虫类工具大全>里面向大家总结了各种实用工具和爬虫技术,今天小编收集了5篇带有实例干货的资料,赶紧来看看吧!另外,喜欢写博客的博主可以申请加工程师博主交流群 ...
- "琳琅满屋"调查问卷 心得体会及结果分析
·关于心得体会 当时小组提出这个校园二手交易市场的时候,就确定了对象范围,仅仅是面向在校大学生,而且在我们之前就已经有了很多成功的商品交易的例子可以让我们去借鉴,再加上我们或多或少的有过网 ...
- ScrollView中嵌入ListView，GridView冲突的解决（让ListView全显示出来）
ScrollView中嵌入原生ListView或GridView,会出现ListView,GridView显示不全的问题. 解决方法:重新构造一个ListView或GridView,重写OnMeasu ...
- iOS 高效添加圆角效果实战讲解
圆角(RounderCorner)是一种很常见的视图效果,相比于直角,它更加柔和优美,易于接受.但很多人并不清楚如何设置圆角的正确方式和原理.设置圆角会带来一定的性能损耗,如何提高性能是另一个需要重点 ...
- mybatis分页插件PageHelper的使用（转）
Mybatis 的分页插件PageHelper-4.1.1的使用 Mybatis 的分页插件 PageHelper 项目地址:http://git.oschina.net/free/Mybatis_P ...
- 《day13--异常的进阶和包的使用》
//101-finally的使用&102-finally的使用场景 /* 需求:有一些特定的代码,无论异常是否发生,都需要执行, 因为异常会引发程序的跳转,导致有些语句执行不到,无法满足这个需 ...
- Android res/raw vs assets
common: 1.两者目录下的文件在打包后会原封不动的保存在apk包中,不会被编译成二进制. difference: 1.res/raw中的文件会被映射到R.java文件中,访问的时候直接使用资源I ...
- Java中的接口与抽象类
抽象类很简单,就是多了个abstract关键字,可以有(也可以没有)只声明不定义的方法.不能实例化该类. 接口比较特殊: 无论你加不加public,接口中声明的方法都是public的,还有无论你加不加 ...
- 一段显示隐藏列表HTML代码
一段显示隐藏列表HTML代码, 技巧在于把页面上的元素(“返回首页”)和控制显示/隐藏的元素(id=navs-menu)放在一个共同的div上,并在该div上绑定onmouseover和onmouse ...
- BZOJ 3260 跳
YY一下发现答案基本上就是(n+1)+ΣC(n+i,i),其中i=1...m. 然后发现后面每一项可以递推,只要处理1..m的逆元就好了. 这题很容易爆long long,每一步都要取模. #incl ...