1、Tab切换简写版1

页面布局如下:

 <div id="tab">
<h1 id="title">
<span class="select">标题一</span>
<span>标题二</span>
<span>标题三</span>
</h1>
<ul id="content">
<li class="show">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>

关于点击事件样式如下:

 /*默认样式&点击后样式*/
#title .select{
color:#FFFFFF;
background: #0AA770;
}
#content .show{
display: block;
}

默认样式如下:

JS代码:

  var tit=document.getElementById('title');
var con=document.getElementById('content');
var spans=tit.getElementsByTagName('span');
var lis=con.getElementsByTagName('li');
//第一个for循环 给每一个span绑定点击事件
for (var i = 0, len= spans.length; i < len; i++){
spans[i].onclick=function(){
//第二个for循环 遍历找出当前点击是的span
for (var j = 0,len= spans.length; j < len; j++) {
if (spans[j]==this) {
this.className='select';
// spans[v].className='select';//效果同上
lis[j].className='show';
} else {//若没被选中清空设置
spans[j].className='';
lis[j].className='';
}
}
}
}

2、Tab切换简写版2

页面布局与默认样式设置与上面相同

JS代码:

 var tit=document.getElementById('title');
var con=document.getElementById('content');
var spans=tit.getElementsByTagName('span');
var lis=con.getElementsByTagName('li');
//第一个for循环 给每一个span绑定点击事件
for (var i = 0, len= spans.length; i < len; i++){
spans[i].index=i;//不同处:获取当前点击事件的索引值为后面设置绑定对象使用
spans[i].onclick=function(){
//第二个for循环 遍历找出当前点击是的span
//清空所有的绑定对象
for (var j = 0,len = spans.length; j < len;j++) {
spans[j].className='';
lis[j].className='';
}
//单独对点击事件绑定对象,索引值来自之前获取的
this.className='select';
lis[this.index].className='show';
}
}

JavaScript学习笔记2之Tab切换的更多相关文章

  1. Java程序猿的JavaScript学习笔记(汇总文件夹)

    最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...

  2. Java程序猿的JavaScript学习笔记(8——jQuery选择器)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  3. Java程序猿JavaScript学习笔记(2——复制和继承财产)

    计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...

  4. Java程序猿的JavaScript学习笔记(3——this/call/apply)

    计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...

  5. Java程序猿JavaScript学习笔记(4——关闭/getter/setter)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  6. Java程序猿JavaScript学习笔记(14——扩大jQuery UI)

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  7. javascript学习笔记(四) Number 数字类型

    数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数  toExponential() 方法 用科学 ...

  8. JavaScript学习笔记之数组(二)

    JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

  9. JavaScript学习笔记[0]

    JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...

随机推荐

  1. php分享(三十六)mysql中关联表更新

    一:关联不同的表更新 1: 通过where关联更新 update student s, city c set s.province_name = c.province_name, s.city_nam ...

  2. Java多线程系列--“JUC集合”04之 ConcurrentHashMap

    概要 本章是JUC系列的ConcurrentHashMap篇.内容包括:ConcurrentHashMap介绍ConcurrentHashMap原理和数据结构ConcurrentHashMap函数列表 ...

  3. PHP 自制日历

    最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示.如下图所示: 一.计算数据 1.new一个Calendar类 2.初始化两个下 ...

  4. Spring MVC 学习总结(二)——控制器定义与@RequestMapping详解

    一.控制器定义 控制器提供访问应用程序的行为,通常通过服务接口定义或注解定义两种方法实现. 控制器解析用户的请求并将其转换为一个模型.在Spring MVC中一个控制器可以包含多个Action(动作. ...

  5. 在ssh中利用Solr服务建立的界面化站内搜索---solr2

         继上次匆匆搭建起结合solr和nutch的所谓站内搜索引擎之后,虽当时心中兴奋不已,可是看了看百度,再只能看看我的控制台的打印出每个索引项的几行文字,哦,好像差距还是有点大……        ...

  6. 解决AndroidADT自带Eclipse编辑器不能自动代码提示的问题。

    今天发现,我下载的AndroidADT开发套装中自带的Eclipse没有自动代码提示功能.通过参考http://blog.csdn.net/coolszy/article/details/724195 ...

  7. jQuery.ajax()的相关参数及使用

    jQuery.ajax(),有很多项参数,小弟菜鸟级别,有时候想不起来,现在记录下来便于以后查看,也欢迎大神指正. 常用的几类,可以称为模板样式写法: $.ajax({ url: "url& ...

  8. 九个Console命令,让js调试更简单

    一.显示信息的命令 最常用的就是console.log了. 二.占位符 console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s).整数(%d或%i).浮点数(%f)和对象( ...

  9. kendo ui的treeView节点点击事件修改和grid的配置的一点总结

    kendo-ui的treeView节点(node)点击时  可以触发一个select的事件(event),并且连续点击多次相同节点,可以触发并且只能触发一次该事件. 可是需求上需要实现:每次点击相同的 ...

  10. 介绍开源的.net通信框架NetworkComms框架 源码分析(三)PacketHeader

    原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架  作者是英国人  以前是收费的 目前作者已经开源  许可是 ...