常见面试题：

<!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. HDOJ/HDU 2700 Parity(奇偶判断~)

    Problem Description A bit string has odd parity if the number of 1's is odd. A bit string has even p ...

  2. [转]让程序在崩溃时体面的退出之Dump文件

    原文地址:http://blog.csdn.net/starlee/article/details/6630816 在我的那篇<让程序在崩溃时体面的退出之CallStack>中提供了一个在 ...

  3. Torque2D MIT 学习笔记(27) ---- ImageFont的使用以及字体ImageAsset的工具生成

    前言 ImageFont继承于SceneObject,是一个场景对象,支持例如旋转,缩放,移动加速度以及物理碰撞等一切Torque中场景对象的一切功能. ImageFont只支持ASCII编码表中的3 ...

  4. linux性能优化

    一.最小化安装系统二.关闭NetworkManager服务. NetworkManger服务如果启动,当你手动配置网卡时会发生冲突 [root@linuxangel ~]# /etc/init.d/N ...

  5. Anjuta 调试无输出 warning: GDB: Failed to set controlling terminal

    调试无输出,起初以为是那个warning的问题,后来才知道这个系统printf直到遇到'\n'换行符才输出,VC6用习惯了没想到还有这样的,网上说这样是节省系统资源. 那个warning暂时还没看到影 ...

  6. Just a Hook

      Just a Hook 题目大意:原来有N个铜棍, 一个人有种能力可以把一个区间的棍变成铜,银或者金的,价值分别是1,2,3, 最后求出总价值,没啥好说的,赤裸裸的线段树: Time Limit ...

  7. 386. Lexicographical Numbers

    用DFS来做,先弄开头是1的,再弄开头是1的里面开头是1的,再开头是1的里面开头是1的里的开头是1的,再... 是吧-- 比N大了BREAK就行. 注意第一个循环是1-9,往后的循环是0-9. pub ...

  8. 接口作为参数，不同的接口调用不同的方法，例如：输出“I love Game”或输出“我喜欢游戏”

    接口的思想:在于可以增加很多类都需要实现的功能.比如:各式各样的商品,可能隶属不同公司,但工商部门都必须具有显示商标的功能(实现同一接口).商标的具体制作由各个公司自己去实现. 给其他类去实现,不同的 ...

  9. Boost.Asio c++ 网络编程翻译（20）

    异步服务端 这个图表是相当复杂的:从Boost.Asio出来你能够看到4个箭头指向on_accept.on_read,on_write和on_check_ping. 着也就意味着你永远不知道哪个异步调 ...

  10. richTextBox1 转到行号

      private void button2_Click(object sender, EventArgs e) {     Win32CommonDialog.frm_GOTO frm = new  ...