<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            width: 500px;

            height: 400px;

            border: 1px solid #000;

            margin: 100px auto;

            overflow: hidden;

        }

        ul {

            list-style: none;

            width: 600px;

            margin-left: -1px;

            overflow: hidden;

        }

        li {

            width: 100px;

            height: 30px;

            float: left;

            border-left: 1px solid #000;

            background-color: purple;

            cursor: pointer;

            text-align: center;

            line-height: 30px;

        }

        span {

            display: block;

            width: 500px;

            height: 370px;

            font: 700 100px/370px "simsun";

            text-align: center;

            background-color: pink;

        }

        .current {

            background-color: yellow;

        }

        .hide {

            display: none;

        }

        .show {

            display: block;

        }

    </style>

</head>

<body>

    <div class="box">

        <ul>

            <li>裤子</li>

            <li>帽子</li>

            <li>鞋子</li>

            <li>袜子</li>

            <li>领子</li>

        </ul>

        <span>裤子</span>

        <span>帽子</span>

        <span>鞋子</span>

        <span>袜子</span>

        <span>领子</span>

    </div>

    <script>

        var liArr = document.getElementsByTagName("li");

        var spanArr = document.getElementsByTagName("span");

        for(var i=0;i<liArr.length;i++){

//            liArr[i].index = i;

            liArr[i].setAttribute("index",i);

            liArr[i].onmouseover = function () {

                for(var j=0;j<liArr.length;j++){

//                    liArr[j].className = "";

//                    spanArr[j].className = "hide";

                    liArr[j].setAttribute("class","");

                    spanArr[j].setAttribute("class","hide");

                }

//                this.className = "current";

//                spanArr[this.index].className = "show";

                this.setAttribute("class","current");

                spanArr[this.getAttribute("index")].setAttribute("class","show");

            }

        }

    </script>

</body>

</html>

　　

tab栏切换效 简易效果的更多相关文章

  1. ES6面向对象实现tab栏切换效果

    面向对象实现tab栏切换效果

  2. jQuery带有定时器的tab栏切换

    现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...

  3. tab栏切换

    最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...

  4. JS实现 Tab栏切换案例

    要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...

  5. dataTable tab栏切换时错位解决办法

    做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...

  6. tab栏切换制作

    tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...

  7. tab栏切换效果案例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. tab栏切换的特殊效果

    在实际的开发过程中,我们可能会遇到这种需求,如下图 左边是三个tab栏,右边是显示内容的div,当鼠标滑到坐标的tab上时,给它一个高亮显示,让它对应的内容在右边的div中显示出来,当鼠标移出的时候把 ...

  9. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

随机推荐

  1. Obj-C Memory Management

    Memory management is one of the most important process in any programming language. It is the proces ...

  2. Django之CSRF问题

    1.csrf全称:cross site request forgery(跨站请求伪造),举例来讲,一个安全的网站A,一个恶意网站B,当你在A网站进行了登录后,这时候浏览器会保存你的cookie和ses ...

  3. 线程池 Threadlocal 使用注意

    线程池中的线程是重复使用的,即一次使用完后,会被重新放回线程池,可被重新分配使用. 因此,ThreadLocal线程变量,如果保存的信息只是针对一次请求的,放回线程池之前需要清空这些Threadloc ...

  4. springmvc+maven搭建web项目

    1.创建一个maven project 为spring1 2.进行项目的配置:默认的java 1.5 在properties中选择project facts项目进行配置,反选web之后修改java环境 ...

  5. 迅为4412开发板Linux设备树的镜像烧写和源码简单优化教程

    1 烧写:   烧写和4412默认镜像的烧写类似,使用fastboot. 先更新uboot,用4412默认uboot更新支持设备树的uboot 用支持设备树的uboot烧写. 进入支持设备树的uboo ...

  6. 补题—Codeforces Round #346 (Div. 2) _智商欠费系列

    这次的题目相对容易 但是智商依旧不够用 原因有三点 1.英文水平堪忧 2 逻辑不严密 3 细节掌握不够好 传送门 http://codeforces.com/contest/659 A 题目大意 圆环 ...

  7. FaceBook pop 动画开源框架使用教程说明

    https://github.com/facebook/pop Pop is an extensible animation engine for iOS and OS X. In addition ...

  8. Mybatis generator自动生成代码包括实体，dao，xml文件

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE generatorConfiguration ...

  9. 公共Service的抽取小例

    package cn.sxx.service; import java.util.List; public interface BaseService<T,Q> { public void ...

  10. python之数据类型补充

    1. capitalize (首字母大写) 例题: s = "alex wusir" s1 = s.capitalize() # 格式 print(s1) ''' 输出结果 Ale ...