JavaScript学习笔记2之Tab切换
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切换的更多相关文章
- Java程序猿的JavaScript学习笔记(汇总文件夹)
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(2——复制和继承财产)
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记(3——this/call/apply)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(4——关闭/getter/setter)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- Java程序猿JavaScript学习笔记(14——扩大jQuery UI)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
- javascript学习笔记(四) Number 数字类型
数字格式化方法toFixed().toExponential().toPrecision(),三个方法都四舍五入 toFixed() 方法指定小数位个数 toExponential() 方法 用科学 ...
- JavaScript学习笔记之数组(二)
JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...
- JavaScript学习笔记[0]
JavaScript学习笔记[0] 使用的是廖雪峰JavaScript教程. 数据类型 Number 表示数字,不区分浮点整形. === 比较时不转化数据类型. == 反之. NaN与任何值都不想等, ...
随机推荐
- php分享(三十六)mysql中关联表更新
一:关联不同的表更新 1: 通过where关联更新 update student s, city c set s.province_name = c.province_name, s.city_nam ...
- Java多线程系列--“JUC集合”04之 ConcurrentHashMap
概要 本章是JUC系列的ConcurrentHashMap篇.内容包括:ConcurrentHashMap介绍ConcurrentHashMap原理和数据结构ConcurrentHashMap函数列表 ...
- PHP 自制日历
最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示.如下图所示: 一.计算数据 1.new一个Calendar类 2.初始化两个下 ...
- Spring MVC 学习总结(二)——控制器定义与@RequestMapping详解
一.控制器定义 控制器提供访问应用程序的行为,通常通过服务接口定义或注解定义两种方法实现. 控制器解析用户的请求并将其转换为一个模型.在Spring MVC中一个控制器可以包含多个Action(动作. ...
- 在ssh中利用Solr服务建立的界面化站内搜索---solr2
继上次匆匆搭建起结合solr和nutch的所谓站内搜索引擎之后,虽当时心中兴奋不已,可是看了看百度,再只能看看我的控制台的打印出每个索引项的几行文字,哦,好像差距还是有点大…… ...
- 解决AndroidADT自带Eclipse编辑器不能自动代码提示的问题。
今天发现,我下载的AndroidADT开发套装中自带的Eclipse没有自动代码提示功能.通过参考http://blog.csdn.net/coolszy/article/details/724195 ...
- jQuery.ajax()的相关参数及使用
jQuery.ajax(),有很多项参数,小弟菜鸟级别,有时候想不起来,现在记录下来便于以后查看,也欢迎大神指正. 常用的几类,可以称为模板样式写法: $.ajax({ url: "url& ...
- 九个Console命令,让js调试更简单
一.显示信息的命令 最常用的就是console.log了. 二.占位符 console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s).整数(%d或%i).浮点数(%f)和对象( ...
- kendo ui的treeView节点点击事件修改和grid的配置的一点总结
kendo-ui的treeView节点(node)点击时 可以触发一个select的事件(event),并且连续点击多次相同节点,可以触发并且只能触发一次该事件. 可是需求上需要实现:每次点击相同的 ...
- 介绍开源的.net通信框架NetworkComms框架 源码分析(三)PacketHeader
原文网址: http://www.cnblogs.com/csdev Networkcomms 是一款C# 语言编写的TCP/UDP通信框架 作者是英国人 以前是收费的 目前作者已经开源 许可是 ...