常见面试题：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="js/jquery/jquery-1.11.1.min.js"></script>

    <style>

        *{

            margin:0px;

            padding:0px;

            list-style: none;

        }

        .main{

            width:500px;

            height:500px;

            margin:auto;

            margin-top:100px;

        }

        .tab{

            overflow:hidden

        }

        .tab li{

            float:left;

            width:100px;

            height:30px;

            border:1px solid #76b4ff;

            border-bottom:none;

            margin-right:5px;

        }

        .tab li:hover{

           background-color:#7EC4CC;

            color:white;

        }

        .check{

            background-color:#7EC4CC;

            color:white;

        }

        .content{

            border:1px solid #76b4ff;

            height:200px;

            width:500px;

        }

        .content li{

        }

        .hidden{

            display:none;

        }

    </style>

</head>

<body>

    <div class="main">

        <div class="tab">

            <ul>

                <li>new</li>

                <li>text</li>

                <li>pic</li>

            </ul>

        </div>

        <div class="content">

            <ul>

                <li>我是第一页</li>

                <li>我是第二页</li>

                <li>我是第三页</li>

            </ul>

        </div>

    </div>

</body>

<script>

    $(".tab li").click(function(){

        $(".tab li").removeClass("check");

        $(".content li").addClass("hidden");

        $(this).toggleClass("check");

        var num=$(this).index();

        switch(num){

            case 0:

                $(".content li:eq("+num+")").removeClass("hidden");

                break;

            case 1:

                $(".content li:eq("+num+")").removeClass("hidden");

                break;

            case 2:

                $(".content li:eq("+num+")").removeClass("hidden");

                break;

        }

    });

</script>

</html>

简单实现tab标签页切换的更多相关文章

  1. 在Bootstrap开发中解决Tab标签页切换图表显示问题

    在做响应式页面的时候,往往需要考虑更多尺寸设备的界面兼容性,一般不能写死像素,以便能够使得界面元素能够根据设备的不同进行动态调整,但往往有时候还是碰到一些问题,如Tab标签第一页面正常显示,但是切换其 ...

  2. JavaScript实现Tab标签页切换的最简便方式

    转载请注明出处:http://www.cnblogs.com/-867259206/p/5664896.html 先说一下最土的一种方法: Html: <div class="tab- ...

  3. VIM 实现tab标签页及分屏，切换命令

    1,在一个窗口中,VIM 的小tab标签页命令:   :tabnew [++opt选项] ［+cmd］ 文件            建立对指定文件新的tab :tabc       关闭当前的tab ...

  4. Android之ActionBar、Tabs、Fragment、ViewPager实现标签页切换并缓存页面

    感觉 Android 到处都是坑,每个地方都要把人折腾半天. 今天来简单说说 Android之ActionBar.Tabs.Fragment.ViewPager 实现标签页切换并缓存页面 关于他们的介 ...

  5. JavaScript 实现 标签页 切换效果

    JavaScript 实现 标签页 切换效果 版权声明:未经授权,严禁分享! 构建主体界面 HTML 代码 <h1>实现标签页的切换效果</h1> <ul id=&quo ...

  6. JS实现标签页切换效果

    本文实例为大家分享了JS标签页切换的具体代码,供大家参考,具体内容如下   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 ...

  7. ExtJS配置TabPanel可以拖拽Tab标签页

    1.环境说明 ExtJS版本:7.4.0.42 Sencha Cmd: v7.5.1.20 开发工具:WebStorm 2022.1.1 PS:如果是老版本的ExtJS,引入Ext.ux.TabReo ...

  8. jquery插件之tab标签页或滑动门

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的tab标签页或滑动门特效,在此插件中默认使用的是鼠标滑过 ...

  9. 如何一行jquery代码写出tab标签页（链式操作）

    啦啦!今天又学了一招,js写几十行的tab标签页jquery写一行就行啦,用到了链式操作!以下是代码: <!DOCTYPE html> <html lang="en&quo ...

随机推荐

  1. nginx主配置文件 在那找怎么打开

  2. mac上的键盘生活——快捷键列表

      主界面 command + tab 切换程序 command + `   在程序内切换界面 command + w     关闭界面 command + q     关闭程序   文本编辑 Com ...

  3. Bzoj 1703: [Usaco2007 Mar]Ranking the Cows 奶牛排名 传递闭包,bitset

    1703: [Usaco2007 Mar]Ranking the Cows 奶牛排名 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 323  Solved ...

  4. GitHub上整理的一些工具，求补充

    http://segmentfault.com/q/1010000002404545 技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MS ...

  5. Java内部类的一些总结

    作为刚入门Java的小白,这两天看到内部类,这里做一个总结,若有错误,欢迎指正~ 内部类是指在一个外部类的内部再定义一个类.类名不需要和文件夹相同. 内部类分为: 成员内部类.局部内部类.静态嵌套类. ...

  6. HDU 4432 Sum of divisors （进制模拟）

    三个小函数 getdiv();        求因子 getsum();     求平方和 change();     转换成该进制 #include <cstdio> #include ...

  7. 自己在安装centos 系统时， 是使用英文安装 成功，现在系统语言为英语，如何设置为中文？

    作为一个linux菜鸟,遇到的问题可谓真多,在虚拟机VMware上安装好centos系统后,心里甚喜,也连上网络了. 一.遇到的问题 but,火狐浏览器浏览网页出现乱码,也不知道怎么解决?所有的中文都 ...

  8. 写一个函数，参数为$n，生成一个数组，其元素为1~$n，各元素位置随机排列，不得重复

    function rand_array($n){ $array=range(1,$n); shuffle($array); return $array; }

  9. IOS-UIProgressView的简单介绍

    IOS-UIProgressView的简单介绍 转载:http://blog.sina.com.cn/s/blog_9c2363ad0101e1jy.html // UIProgressView的使用 ...

  10. Elasticsearch .Net Client NEST 多条件查询示例

    Elasticsearch .Net Client NEST 多条件查询示例 /// <summary> /// 多条件搜索例子 /// </summary> public c ...