一、实现原理

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实现选项卡（基础版）的更多相关文章

  1. 原生JavaScript的省市县三级联动

    三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> < ...

  2. javaScript高程第三版读书笔记

    看完<dom编程艺术>现在准备读进阶版的js高程了,由于篇幅较长,所以利用刚看完<dom编程艺术>学到的知识写了段JavaScript代码,来折叠各章的内容.并且应用到了< ...

  3. 编写Javascript类库（jQuery版

    编写Javascript类库(jQuery版) - 进阶者系列 - 学习者系列文章 Posted on 2014-11-13 09:29 lzhdim 阅读(653) 评论(1) 编辑 收藏 本系列文 ...

  4. 原生javascript写自己的运动库（匀速运动篇）

    网上有很多JavaScript的运动库,这里和大家分享一下用原生JavaScript一步一步写一个运动函数的过程,如读者有更好的建议欢迎联系作者帮助优化完善代码.这个运动函数完成后,就可以用这个运动函 ...

  5. 你可能不需要 jQuery！使用原生 JavaScript 进行开发

    很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...

  6. 表单美化-原生javascript和jQuery单选按钮（兼容IE6）

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  7. 原生javascript开发仿微信打飞机小游戏

    今天闲来无事,于是就打算教一个初学javascript的女童鞋写点东西,因此为了兼顾趣味性与简易程度,果断想到了微信的打飞机小游戏.. 本来想用html5做的,但是毕竟人家才初学,连jquery都还不 ...

  8. 原生 JavaScript 代码和Jquery实现对比

    下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...

  9. 使用原生JavaScript的Canvas实现拖拽式图形绘制，支持画笔、线条、箭头、三角形、矩形、平行四边形、梯形以及多边形和圆形，不依赖任何库和插件，有演示demo

    前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包 ...

随机推荐

  1. PHP实现微信小程序人脸识别刷脸登录功能

    首先我们先确认我们的百度云人脸库里已经上传了我们的个人信息照片 然后我们在后台写刷脸登陆的接口login我们要把拍照获取的照片存储到服务器 public function login(){    // ...

  2. 深入java面向对象二：final关键字

    文章内容源于对<疯狂java讲义>及<疯狂Java:突破程序员基本功的16课>学习和总结. 一. final成员变量 final 修饰变量时,表示该变量一旦获取了值就不可以改变 ...

  3. C# 配置文件存储 各种序列化算法性能比较

    本文比较多个方式进行配置文件的存储,对比各个不同算法的读写性能. 在应用软件启动的时候,需要读取配置文件,但是启动的性能很重要,所以需要有一个很快的读取配置文件的方法. 如果你不想看过程,那么请看拖动 ...

  4. centos7搭建集群必知：centos7已经无iptables，只有firewall

    1.防火墙概述 centos7搭建集群,发现没有iptables,需要安装.防火墙为firewalle CentOS7默认的防火墙不是iptables,而是firewalle. CentOS 7.0默 ...

  5. H3C 计算子网内可用主机地址数

  6. 【踩坑记录】vue单个组件内<style lang="stylus" type="text/stylus" scoped>部分渲染失效

    vue组件化应用,近期写的单个组件里有一个的渲染部分样式渲染不上去 因为同结构的其他组件均没有问题,所以排除是.vue文件结构的问题,应该是<style>内部的问题 <style l ...

  7. 2018-2-13-C＃-解析-sln-文件

    title author date CreateTime categories C# 解析 sln 文件 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23 ...

  8. 2018.10.26 浪在ACM 集训队第二次测试赛

    2018.10.26 浪在ACM 集训队第二次测试赛 整理人:苗学林 A海港 参考博客:[1]:李继朋https://www.cnblogs.com/violet-acmer/p/9859006.ht ...

  9. 获取active nn并替换hue.ini

    namenodelists="nnip1,nnip2" nn1=$() nn2=$() nn1state=$(curl "http://$nn1:50070/jmx?qr ...

  10. 30分钟全方位了解阿里云Elasticsearch（附公开课完整视频）

    摘要: 阿里云Elasticsearch提供100%兼容开源Elasticsearch的功能,以及Security.Machine Learning.Graph.APM等商业功能,致力于数据分析.数据 ...