原生javascript实现选项卡(基础版)
一、实现原理
1、主要运用“排他思想”,在设置当前元素前,先把相应元素恢复到默认状态
2、给相应元素添加下标的应用
二、代码展示
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} ul,li{ list-style: none; } ul{display: block;overflow: hidden; clear: both;} li{display:block;float: left; width: 200px; height: 40px;line-height: 40px; text-align: center; background:#eee; color: #333;cursor: pointer;} li.on{ background:orange; color: #fff;} div{width:600px;display: none; height: 400px; text-align: center;line-height: 400px; border:1px solid #eee; box-sizing: border-box;} </style> </head> <body> <ul id="box"> <li class="on">国内</li> <li>国外</li> <li>市政</li> </ul> <div style="display: block;">国内</div> <div>国外</div> <div>市政</div> </body> <script type="text/javascript"> var oLis = document.getElementsByTagName('li'); var oDiv = document.getElementsByTagName('div'); for (var i = 0; i < oLis.length; i++) { //给每个li设置下标 oLis[i].index = i; oLis[i].onclick = function(){ //li点击时,拍他思想,把所有的li去掉选中状态,所有的div都隐藏 for (var j = 0; j < oLis.length; j++) { oLis[j].className = ''; oDiv[j].style.display = 'none'; } // 设置当前点击的li为选中状态 this.className = 'on'; // 根据当前li的下标,设置对应的div展示出来 oDiv[this.index].style.display = 'block'; } } </script> </html>
原生javascript实现选项卡(基础版)的更多相关文章
- 原生JavaScript的省市县三级联动
三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> < ...
- javaScript高程第三版读书笔记
看完<dom编程艺术>现在准备读进阶版的js高程了,由于篇幅较长,所以利用刚看完<dom编程艺术>学到的知识写了段JavaScript代码,来折叠各章的内容.并且应用到了< ...
- 编写Javascript类库(jQuery版
编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章 Posted on 2014-11-13 09:29 lzhdim 阅读(653) 评论(1) 编辑 收藏 本系列文 ...
- 原生javascript写自己的运动库(匀速运动篇)
网上有很多JavaScript的运动库,这里和大家分享一下用原生JavaScript一步一步写一个运动函数的过程,如读者有更好的建议欢迎联系作者帮助优化完善代码.这个运动函数完成后,就可以用这个运动函 ...
- 你可能不需要 jQuery!使用原生 JavaScript 进行开发
很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...
- 表单美化-原生javascript和jQuery单选按钮(兼容IE6)
最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...
- 原生javascript开发仿微信打飞机小游戏
今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...
- 原生 JavaScript 代码和Jquery实现对比
下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...
- 使用原生JavaScript的Canvas实现拖拽式图形绘制,支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形,不依赖任何库和插件,有演示demo
前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...
随机推荐
- jQuery的引入和使用
https://www.cnblogs.com/sandraryan/ 前端代码优化:无效循环越少越好,DOM节点操作越少越好,HTTP请求越少越好 jq是一个js库.(不是框架) JQ优点 1. 方 ...
- DataTable添加单个或多个字段组成的主键,实现查找
单列主键 DataTable fdt = CmmDb.GetDataTable(orgsql); fdt.PrimaryKey = new DataColumn[] { fdt.Columns[&qu ...
- Centos下添加用户到用户组
将一个用户添加到用户组中,千万不能直接用: usermod -G groupA 这样做会使你离开其他用户组,仅仅做为 这个用户组 groupA 的成员. 应该用 加上 -a 选项: usermod - ...
- Python--day24--单继承关键字super
super(). 调用父类方法:(super不仅可以在一个类的内部使用,还可以在一个类的外部使用)
- River Hopscotch-[二分查找、贪心]
Description Every year the cows hold an event featuring a peculiar version of hopscotch that involve ...
- Mockito -- 入门篇
Mockito是一种mock工具/框架.我理解EasyMock有点过时了,Mockito是现在比较流行的. 什么是mock?说的直白一点,大家都知道unit test应该是尽可能独立的.对一个clas ...
- tet-2
一.html和css部分 1.如何理解CSS的盒子模型? 标准盒子模型:宽度=内容的宽度(content)+ border + padding 低版本IE盒子模型:宽度=内容宽度(content+ ...
- Linux 内核VLB 总线
另一个对 ISA 的扩展是 VESA Local Bus(VLB) 接口总线, 它扩展了 ISA 连接器, 通过 添加第 3 个知道长度的槽位. 一个设备可只插入这个额外的连接器(不用插入 2 个关联 ...
- [竞赛]Beat Matching(对拍)
对拍的基本理论这里恕我不一一叙述,不会的请转身到这里:http://blog.csdn.net/code12hour/article/details/51252457 分为以下几个部分: 1.暴力伪标 ...
- scrf 原理及flask-wtf防护
了解什么是scrf? SCRF跨站点请求伪造Cross—Site Request Forgery) 指恶意用户通过个人用户的点击,然而盗用用户的账号信息,并发送邮件.虚拟货币的转账,以及一些重要的事务 ...