基于JavaScript实现Tab选项卡切换效果


Posted in Javascript onNovember 24, 2016

本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 * {
  padding: 0;
  margin: 0;
 }
 .box {
  width: 500px;
  height: 400px;
  border: 1px solid #ccc;
  margin: 100px auto;
  overflow: hidden;
 }
 ul {
  width: 600px;
  height: 40px;
  margin-left: -1px;
  list-style: none;
 }
 li {
  float: left;
  width: 101px;
  height: 40px;
  text-align: center;
  font: 600 18px/40px "simsun";
  background-color: pink;
  cursor: pointer;
 }
 span {
  display: none;
  width: 500px;
  height: 360px;
  background-color: yellow;
  text-align: center;
  font: 700 150px/360px "simsun";
 }
 .show {
  display: block;
 }
 .current {
  background-color: yellow;
 }
 </style>

 <script>
 window.onload = function () {
  var boxArr = document.getElementsByClassName("box");
  for(var i=0;i<boxArr.length;i++){
  fn(boxArr[i]);
  }
  function fn(ele){
  var liArr = ele.getElementsByTagName("li");
  var spanArr = ele.getElementsByTagName("span");
  for(var i=0;i<liArr.length;i++){
   liArr[i].index = i;
   liArr[i].onmouseover = function () {
   for(var j=0;j<liArr.length;j++){
    liArr[j].className = "";
    spanArr[j].className = "";
   }
   this.className = "current";
   spanArr[this.index].className = "show";
   }
  }
  }
 }
 </script>
</head>
<body>

 <div class="box">
 <ul>
  <li class="current">鞋子</li>
  <li>袜子</li>
  <li>帽子</li>
  <li>裤子</li>
  <li>裙子</li>
 </ul>
 <span class="show">鞋子</span>
 <span>袜子</span>
 <span>帽子</span>
 <span>裤子</span>
 <span>裙子</span>
 </div>

 <div class="box">
 <ul>
  <li class="current">鞋子</li>
  <li>袜子</li>
  <li>帽子</li>
  <li>裤子</li>
  <li>裙子</li>
 </ul>
 <span class="show">鞋子</span>
 <span>袜子</span>
 <span>帽子</span>
 <span>裤子</span>
 <span>裙子</span>
 </div>

 <div class="box">
 <ul>
  <li class="current">鞋子</li>
  <li>袜子</li>
  <li>帽子</li>
  <li>裤子</li>
  <li>裙子</li>
 </ul>
 <span class="show">鞋子</span>
 <span>袜子</span>
 <span>帽子</span>
 <span>裤子</span>
 <span>裙子</span>
 </div>

</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Ajax一统天下之Dojo整合篇
Mar 24 Javascript
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
jquery cookie的用法总结
Nov 18 Javascript
js判断客户端是iOS还是Android等移动终端的方法
Dec 11 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 Javascript
Javascript中神奇的this
Jan 20 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
vue-cli项目配置多环境的详细操作过程
Oct 30 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 #Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 #Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 #Javascript
BootStrap树状图显示功能
Nov 24 #Javascript
Bootstrop实现多级下拉菜单功能
Nov 24 #Javascript
AngularJS自定义服务与fliter的混合使用
Nov 24 #Javascript
微信小程序-详解数据缓存
Nov 24 #Javascript
You might like
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
为何说PHP引用是个坑,要慎用
2018/04/02 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
Nodejs Post请求报socket hang up错误的解决办法
2014/09/25 NodeJs
原生js实现图片层叠轮播切换效果
2016/02/02 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
2017/02/24 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
关于javascript作用域的常见面试题分享
2017/06/18 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
JS与jQuery判断文本框还剩多少字符可以输入的方法
2018/09/01 jQuery
微信小程序自定义组件实现环形进度条
2020/11/17 Javascript
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
Python 正则表达式操作指南
2009/05/04 Python
Python的Django框架中TEMPLATES项的设置教程
2015/05/29 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
如何在python中实现随机选择
2019/11/02 Python
python使用配置文件过程详解
2019/12/28 Python
python爬虫爬取监控教务系统的思路详解
2020/01/08 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
请写出char *p与"零值"比较的if语句
2014/09/24 面试题
本科毕业生的求职信范文
2013/11/20 职场文书
毕业生护理专业个人求职信范文
2014/01/04 职场文书
自我鉴定三原则
2014/01/13 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
Django实现聊天机器人
2021/05/31 Python
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
原生JS实现分页
2022/04/19 Javascript
Golang gRPC HTTP协议转换示例
2022/06/16 Golang