脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js tab选项卡切换效

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

 更新时间：2016年11月24日 14:23:56   作者：华哥爱学习  
这篇文章主要介绍了基于JavaScript实现Tabs选项卡切换效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • js中!和!!的区别与用法

    js中!和!!的区别与用法

    这篇文章主要介绍了js中!和!!的区别与用法,js中!的用法是比较灵活的，它除了做逻辑运算常常会用！做类型判断，可以用！与上对象来求得一个布尔值，需要的朋友可以参考下
    2020-05-05
  • JavaScript mixin实现多继承的方法详解

    JavaScript mixin实现多继承的方法详解

    这篇文章主要介绍了JavaScript mixin实现多继承的方法,结合实例形式分析了mixin多继承的原理与具体实现技巧,需要的朋友可以参考下
    2017-03-03
  • javascript表单验证和Window详解

    javascript表单验证和Window详解

    这篇文章主要详细介绍了javascript表单验证和Window，并附上了示例代码，非常使用，对于我们更好的了解表单验证和Window很有帮助，这里推荐给大家
    2014-12-12
  • JS实现纵向轮播图（初级版）

    JS实现纵向轮播图（初级版）

    这篇文章主要为大家详细介绍了JS实现纵向轮播图的初级版，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-01-01
  • 老生常谈javascript的类型转换

    老生常谈javascript的类型转换

    下面小编就为大家带来一篇老生常谈javascript的类型转换。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 最新Javascript程序员面试试题和解题方法

    最新Javascript程序员面试试题和解题方法

    本文主要给大家整理了最新的Javascript程序员面试试题以及相关的解题方法和思路。
    2017-11-11
  • 详解JavaScript数组和字符串中去除重复值的方法

    详解JavaScript数组和字符串中去除重复值的方法

    这篇文章主要介绍了详解JavaScript数组和字符串中去除重复值的方法,及利用各种限制条件对数组和字符串进行过滤,需要的朋友可以参考下
    2016-03-03
  • 原生JavaScript轮播图实现方法

    原生JavaScript轮播图实现方法

    这篇文章主要为大家详细介绍了原生JavaScript轮播图实现方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JavaScript继承定义与用法实践分析

    JavaScript继承定义与用法实践分析

    这篇文章主要介绍了JavaScript继承定义与用法,结合实例形式分析了JavaScript面向对象程序设计中基类的定义、原型继承以及调用父类构造函数等相关操作技巧,需要的朋友可以参考下
    2018-05-05
  • 微信小程序入门教程

    微信小程序入门教程

    本篇文章主要介绍了微信小程序入门教程，现在分享给大家，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2016-11-11

最新评论