基于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 相关文章推荐
jquery 得到当前页面高度和宽度的两个函数
Feb 21 Javascript
关于递归运算的顺序测试代码
Nov 30 Javascript
jquery点击页面任何区域实现鼠标焦点十字效果
Jun 21 Javascript
jQuery 动态云标签插件
Nov 11 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
Jun 09 Javascript
D3.js实现直方图的方法详解
Sep 25 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
Mar 16 Javascript
BootStrap TreeView使用实例详解
Nov 01 Javascript
vue中改变选中当前项的显示隐藏或者状态的实现方法
Feb 08 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
JavaScript多种图形实现代码实例
Jun 28 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 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 获取select下拉列表框的值
2010/05/08 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
php实现微信企业付款到个人零钱功能
2018/10/09 PHP
PHP匿名函数(闭包函数)详解
2019/03/22 PHP
浅谈Laravel中的三种中间件的作用
2019/10/13 PHP
laravel5 Eloquent 实现事务方式
2019/10/21 PHP
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
2013/11/26 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
2015/08/12 Javascript
JavaScript数据结构之数组的表示方法示例
2017/04/12 Javascript
vue mounted组件的使用
2018/06/18 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
vue源码中的检测方法的实现
2019/09/26 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
使用js原生实现年份轮播选择效果实例
2021/01/12 Javascript
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
python实现数独游戏 java简单实现数独游戏
2018/03/30 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python偏函数实现原理及应用
2020/11/20 Python
python中time、datetime模块的使用
2020/12/14 Python
html5 学习简单的拾色器
2010/09/03 HTML / CSS
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
婚纱摄影师求职信
2014/03/07 职场文书
干部考核评语
2014/04/29 职场文书
工地安全标语
2014/06/07 职场文书
中学生运动会广播稿
2015/08/19 职场文书
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android
Python find()、rfind()方法及作用
2022/12/24 Python