<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .box{

            height: 300px;

            width: 400px;

            border:1px solid #000;

            margin: 100px auto;

        }

        .mt span{

            display: inline-block;

            width: 93px;

            height: 50px;

            border: 1px solid #333;

            text-align: center;

            line-height: 50px;

            background: #ff3;

        }

        .mt span.current{

            background: purple;

        }

        ul li{

            list-style: none;

            float: left;

            width: 400px;

            height: 250px;

            border: 1px solid #e0e0e0;

            display: none;

            background: purple;

        }

        ul li.show{

            display: block;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="mt">

            <span class="current">新闻</span>

            <span>体育</span>

            <span>娱乐</span>

            <span>八卦</span>

        </div>

        <div class="mb">

            <ul>

                <li class="show">新闻模块</li>

                <li>体育模块</li>

                <li>娱乐模块</li>

                <li>八卦模块</li>

            </ul>

        </div>

    </div>

</body>

</html>

<script>

    window.onload=function () {

        var spans=document.getElementsByTagName('span');

        var lis=document.getElementsByTagName('li');

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

            // 得到span的索引

            spans[i].index=i;

            spans[i].onmouseover=function () {

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

                    spans[j].className=' ';

                    lis[j].className=' ';

                }

                this.className='current';

                lis[this.index].className='show';

            }

        }

    }

</script>

原始tab栏切换的更多相关文章

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

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

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

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

  3. tab栏切换

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

  4. tab栏切换制作

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

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

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

  6. JS实现 Tab栏切换案例

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

  7. tab栏切换的特殊效果

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

  8. JavaScript实现Tab栏切换

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

  9. [javascript]switchTab:仿腾讯首页Tab栏切换js插件

    腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...

随机推荐

  1. 原创Oracle数据泵导出/导入(expdp/impdp)

    //创建目录 create Or Replace directory dpdata1 as 'd:\test\dump'; //赋予读写权限 grant read,write on directory ...

  2. js setTimeout 传递带参数的函数的2种方式

      js setTimeout 传递带参数的函数的2种方式 Created by Marydon on 2018年9月14日 1.准备工作 function sayYourName(param) { ...

  3. HDU 5358 First One(枚举)

    这道题假设依照表达式一个个来算肯定超时,下午时候想了一个O(nlogn*logn)的算法.可是t了.由于这道题卡的很紧几百个例子,必须nlogn的算法才干够ac 回到这道题,考虑log(sum(i,j ...

  4. More Effective C++：通过引用捕获异常

    当你写一个catch子句时,必须确定让异常通过何种方式传递到catch子句里.你可以有三个选择:与你给函数传递参数一样,通过指针(by pointer),通过传值(by value)或通过引用(by ...

  5. Chrome 编译错误汇总

    由于各种你懂的原因,訪问google的服务总是出错,先是hosts不工作.代理也不好使,最后最终能够短暂訪问了.我的版本号还是採用svn维护的,直接svn update也不行.试试git吧,一晚上才下 ...

  6. linux下修改文件权限

    加入-R 参数,就可以将读写权限传递给子文件夹例如chmod -R 777 /home/mypackage那么mypackage 文件夹和它下面的所有子文件夹的属性都变成了777777是读.写.执行权 ...

  7. Windows命令-route

    Windows route命令 添加一条永久网关:route add 0.0.0.0 mask 0.0.0.0 192.168.2.1 -p例如: route -p add 192.168.0.0 m ...

  8. Debian/Ubuntu架设nginx+bugzilla

    题注 最近需要一个简单快速的bug追踪工具,考虑到系统环境以及学习成本,决定采用bugzilla.不试不知道,原来这里面还有这么多的坑需要一个个踩平~,遂随笔一下以备后用. 我采用的系统组成是debi ...

  9. 【js】正则表达式（I）

    正则表达式是由英文词语regular expression翻译过来的,就是符合某种规则的表达式.正则表达式在软件开发中应用非常广泛,例如,找出网页中的超链接,找出网页中的email地址,找出网页中的手 ...

  10. Word 2007 Blog Test

    MAC       方法一: 引用 sudo gedit /etc/network/interfaces 将iface eth0 inet static后面添加一行 hwaddress ether 0 ...