一、实现原理

1、主要运用“排他思想”，在设置当前元素前，先把相应元素恢复到默认状态

2、给相应元素添加下标的应用

二、代码展示

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7. <title></title>
  8.  
  9. <style type="text/css">
  10.  
  11. *{margin: 0;padding: 0;}
  12.  
  13. ul,li{ list-style: none; }
  14.  
  15. ul{display: block;overflow: hidden; clear: both;}
  16.  
  17. li{display:block;float: left; width: 200px; height: 40px;line-height: 40px; text-align: center; background:#eee; color: #333;cursor: pointer;}
  18.  
  19. li.on{ background:orange; color: #fff;}
  20.  
  21. div{width:600px;display: none; height: 400px; text-align: center;line-height: 400px; border:1px solid #eee; box-sizing: border-box;}
  22.  
  23. </style>
  24.  
  25. </head>
  26.  
  27. <body>
  28.  
  29. <ul id="box">
  30.  
  31. <li class="on">国内</li>
  32.  
  33. <li>国外</li>
  34.  
  35. <li>市政</li>
  36.  
  37. </ul>
  38.  
  39. <div style="display: block;">国内</div>
  40.  
  41. <div>国外</div>
  42.  
  43. <div>市政</div>
  44.  
  45. </body>
  46.  
  47. <script type="text/javascript">
  48.  
  49. var oLis = document.getElementsByTagName('li');
  50.  
  51. var oDiv = document.getElementsByTagName('div');
  52.  
  53. for (var i = 0; i < oLis.length; i++) {
  54.  
  55. //给每个li设置下标
  56.  
  57. oLis[i].index = i;
  58.  
  59. oLis[i].onclick = function(){
  60.  
  61. //li点击时，拍他思想，把所有的li去掉选中状态，所有的div都隐藏
  62.  
  63. for (var j = 0; j < oLis.length; j++) {
  64.  
  65. oLis[j].className = '';
  66.  
  67. oDiv[j].style.display = 'none';
  68.  
  69. }
  70.  
  71. // 设置当前点击的li为选中状态
  72.  
  73. this.className = 'on';
  74.  
  75. // 根据当前li的下标，设置对应的div展示出来
  76.  
  77. oDiv[this.index].style.display = 'block';
  78.  
  79. }
  80.  
  81. }
  82.  
  83. </script>
  84.  
  85. </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. HDU 2602Bone Collector 01背包问题

    题意:给出一个t代表有t组数据,然后给出n,n代表有n种石头,v代表旅行者的背包容量,然后给出n种石头的价值和容量大小,求能带走的最大价值 思路:01背包问题,每种石头只有拿与不拿两种状态.(其实我是 ...

  2. poj 3624 Charm Bracelet（01背包）

    Charm Bracelet Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 29295   Accepted: 13143 ...

  3. JPA一对多循环引用的解决&&JackSon无限递归问题

    说是解决,其实不是很完美的解决的,写出来只是想记录一下这个问题或者看一下有没有哪位仁兄会的,能否知道一二. 下面说说出现问题: 问题是这样的,当我查询一个一对多的实体的时候,工具直接就爆了,差不多我就 ...

  4. 通过页码直接跳转 html

    <?php namespace Admin\TagLib; class BootstrapPage{ public $firstRow; // 起始行数 public $listRows; // ...

  5. element-ui—dialog使用过程中的坑

    场景一:我们将dialog写成一个可复用的公共组件用于显示不同内容(如表格操作中的修改或添加的弹窗),之后发现dialog的遮罩将弹出层(点击修改或添加后理应由一个弹窗显示出来)都盖住了,而我想要的效 ...

  6. ActiveMQ--配置端口

    配置端口 端口配置选项 一般最常用的URI是连接到代理的端口URI,通常为TCP或VM端口. 要注意空格:所有的URI都是基于java.net.URI类,它并不允许使用空格.所以,如果你使用failo ...

  7. sci,ei,istp三大科技文献检索系统

    印刷版(SCI) 双月刊 ,500种 联机版(SciSearch) 周更新 ,600种 光盘版(带文摘)(SCICDE) 月更新 ,500种(同印刷版) 网络版(SCIExpanded) 周更新 ,6 ...

  8. 2018-6-29-PTA-6-2-多项式求值

    title author date CreateTime categories PTA 6-2 多项式求值 lindexi 2018-06-29 15:24:28 +0800 2018-6-14 22 ...

  9. url查找参数

    function GetUrlParam(paraName) { var url = document.location.toString(); var arrObj = url.split(&quo ...

  10. VScode快捷键（最全）

    按 Press 功能 Function Ctrl + Shift + P,F1 显示命令面板 Show Command Palette Ctrl + P 快速打开 Quick Open Ctrl + ...