<!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. hihocoder1776 序列

    思路: 考虑从左至右依次向每个位置放置数字,对于第i个位置,以i为结尾的i个前缀和模P是不能相等的(因为不存在和为P的倍数的子串),所以第i个位置只能放置P - i个不同的数字.则答案就是(P - 1 ...

  2. Spring MVC异常统一处理（包括普通请求异常以及ajax请求异常）

    通常SpringMVC对异常的配置都是返回某个jsp视图给用户,但是通过ajax方式发起请求,即使发生异常,前台也无法获得任何异常提示信息.因此需要对异常进行统一的处理,对于普通请求以及ajax请求的 ...

  3. 后台安装 SQL Server 无人值守 安装

    (开头闲淡)项目需要必须安装SQL的,查了很久,断断续续用了各种方法,今天终于用了正确的姿(xia)势(mo)弄成了. 最开始用的方法是调用Win的API模拟鼠标操作安装的,嗯,虽然勉强可以,就是有些 ...

  4. POJ 2378 Tree Cutting （树的重心，微变形）

    题意: 给定一棵树,n个节点,若删除点v使得剩下的连通快最大都不超过n/2,则称这样的点满足要求.求所有这样的点,若没有这样的点,输出NONE. 思路: 只需要拿“求树的重心”的代码改一行就OK了.因 ...

  5. Python学习日志9月14日

    今天早晨又没有专心致志的学习,我感觉我可能是累了,需要减轻学习的程度来调整一下咯.这几天装电脑弄的昏天暗地的,身体有点吃不消了.时间真是神奇的魔法,这半个月来,每隔几天都有想要改变策略的想法.今天早晨 ...

  6. Educational Codeforces Round 12补题 经典题 再次爆零

    发生了好多事情 再加上昨晚教育场的爆零 ..真的烦 题目链接 A题经典题 这个题我一开始推公式wa 其实一看到数据范围 就算遍历也OK 存在的问题进制错误 .. 思路不清晰 两个线段有交叉 并不是端点 ...

  7. MIPS—冒泡排序

    SORT 使用冒泡排序对整数数组进行排序,这种排序虽然不是最快的,但却是最简单的. C语言代码 #include<stdio.h> #include<iostream> usi ...

  8. firstElectron_web5 安装

    小娜 搜 cmd 右键 管理员运行 1.装全局 这样 不用每次都下载 因为包挺大的 还有用cnpm 要不太慢 cnpm install electron --save-dev --save-exact ...

  9. 二分查找 && 三分查找

    LeetCode34. Find First and Last Position of Element in Sorted Array 题意:找出指定元素出现的范围,Ologn 思路:两次二分 cla ...

  10. OpenCV2:第十一章 图像转换

    一.简介 二.例子 #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #inclu ...