基于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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
May 27 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
React服务端渲染(总结)
Jul 01 Javascript
详解vue express启动数据服务
Jul 05 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 Javascript
vue: WebStorm设置快速编译运行的方法
Oct 18 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
Feb 15 Javascript
js判断鼠标移入移出方向的方法
Jun 24 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 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
浅析51个PHP处理字符串的函数
2013/08/02 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
PHP模块化安装教程
2016/06/01 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
replace()方法查找字符使用示例
2013/10/28 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
nodeJs链接Mysql做增删改查的简单操作
2017/02/04 NodeJs
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
AngularJS与后端php的数据交互方法
2018/08/13 Javascript
webuploader实现上传图片到服务器功能
2018/08/16 Javascript
Python3 能振兴 Python的原因分析
2014/11/28 Python
django 多数据库配置教程
2018/05/30 Python
python算法与数据结构之单链表的实现代码
2019/06/27 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
Python Django 命名空间模式的实现
2019/08/09 Python
python OpenCV GrabCut使用实例解析
2019/11/11 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
python中什么是面向对象
2020/06/11 Python
Python如何自动获取目标网站最新通知
2020/06/18 Python
如何通过命令行进入python
2020/07/06 Python
python实现将中文日期转换为数字日期
2020/07/14 Python
智能旅行箱:Horizn Studios
2018/04/30 全球购物
建筑自我鉴定
2013/10/19 职场文书
《兰亭集序》教学反思
2014/02/11 职场文书
给校长的建议书100字
2014/05/16 职场文书
政府个人对照检查材料
2014/08/28 职场文书
公司2015年终工作总结
2015/05/26 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript
浅谈Python响应式类库RxPy
2021/06/14 Python