效果图：

默认选中  科技                                                                                 当鼠标悬停在   新闻  上时

html代码：

<body>

    <div class="main-tab">

        <div class="tab-box">

            <ul>

                <li class="active">科技</li>

                <li>新闻</li>

                <li>体育</li>

                <li>财经</li>

            </ul>

            <div class="tab-content">

                <div class="active-txt">

                    伴随着中国移动(微博)成功牵头5G系统设计，其4G用户的规模也达到了惊人的数量。在今日举行的第七届全球移动宽带论坛（Global Mobile Broadband Forum，以下简称MBBF）上，中国移动总裁李跃透露，截至目前，中国移动4G用户已突破5亿户。 几天前，中国移动公布了2016年10月份运营数据，其中4G用户数已达49732.7万，无限逼近5个亿，这个数量级意味着差不多1/3中国人都是中国移动4G用户，远远超过另两家中国电信(微博)和中国联通(微博)4G用户数之和。 在4G基站方面，李跃表示，今年年底将建成4G基站140万座，并通过载波聚合等技术提升4G+服务能力。在VoLTE方面，到今年年底，VoLTE将覆盖超过300个城市，发展用户3000万，推出VoLTE/CA终端达1亿部，实现总量3.3亿部。

                    为了争夺用户并向5G平滑过渡，中国的三大运营商一直在加快4G+网络建设的步伐，尤其是基于该网络下的VoLTE服务（即高清语音、视频通话），已成为现阶段运营商竞争的焦点。 三大运营商中，中国移动在VoLTE方面推进速度比较快。今年上半年，中国移动就曾推出过三个月的VoLTE体验套餐活动，免费向用户每月赠送VoLTE的高清语音（含高清视频）国内长市漫主叫500分钟优惠。近期中国移动又推出每月免费送200分钟的VoLTE服务，但需要申请开通。 不过，在关于VoLTE的测试中，腾讯科技发现通话过程期间确实可以同时上网，不过，浏览网页速度较慢，而打开视频几乎不太可能，犹如回到3G时代。外界也对VoLTE声讨不断，认为其是运营商的鸡肋业务。

                    一位行业人士说：“中国移动推VoLTE，是因为从4G回落2G连接太慢，且双网双待终端成本又高，导致建设和维护2G\4G网络成本身高，所以不得已才推VoLTE，并非市场用户需求所致。” 工业和信息化部第三季度电信服务质量通告显示。截至第三季度末，全国电话用户总数达到15.32亿户，其中移动电话用户13.16亿户;其中4G用户维持高速增长，1－9月净增2.56亿户，总数达到6.86亿户。

                </div>

                <div>

                    【丰城电厂三期在建冷却塔施工平台倒塌事故死亡人数升至40余人】据现场救援人员透露，至记者发稿时，24日7点左右发生在丰城电厂三期在建冷却塔施工平台倒塌事故死亡人数已上升至40余人。 卫生、消防等救援人员已到达现场。据丰城市安监部门负责人介绍，发生事故的是丰城电厂三期在建的冷却塔项目。 据丰城政府网介绍，江西丰城电厂位于丰城市西面石上村铜鼓山，厂区距丰城市区8公里，距南昌市约60km，南临赣江约0.5km，东距丰高公路约0.6km，北距丰城水泥厂2.8km

                </div>

                <div>

                    马竞联赛陷入低迷，近5轮2胜3负，连丢9分，德比0-3负皇马(数据) ，是西蒙尼任内最大比分德比败局，终结3赛季联赛对垒皇马不败金身。不过回欧冠赛场，马竞却空前强势，本轮击退埃因霍温，只让对手射门4次，近8场欧冠主场赛事，床单军7胜1平不败，其中7场零封对手。马竞5连胜期间丢球只有1个，4场零封，比联赛近5场丢9球，出色许多，活似英超卫冕冠军莱斯特城，联赛萎靡欧冠生猛（蓝狐甚至联赛12分少于欧冠13分）。 头号球星格列兹曼传射建功，再次成马竞取胜功臣，这是其首次连续两场欧冠破门，代表马竞已打入12个欧冠进球，追平已故本队名宿阿拉贡内斯，并列队史欧冠进球最多的杀手。法国国脚本赛季联赛加欧冠已助攻6次，联赛4欧冠2，已超上赛季全年的6助（联赛4欧冠1），同样超过2014-15赛季全年4助攻。

                    有趣的是，马德里双雄本轮靠4位法国国脚分别进球取胜，皇马是瓦拉内与本泽马，马竞是格列兹曼与加梅罗。新援加梅罗斩获加盟后首个欧战进球，马竞生涯17战6球，已比今冬加盟广州恒大的杰克逊-马丁内斯效力马竞时总进球多一倍，J马22战3球。 本赛季是瓜迪奥拉执教生涯中，头一次欧冠小组赛未能以头名晋级，与其同命相连的是安切洛蒂，被西蒙尼挤到第2。这不意外，本赛季已是马竞连续第4个赛季拿下欧冠小组头名，本赛季少打1轮已有15分，仅次于2013-14赛季16分，超过上赛季与2014-15赛季的13分。

                    自1996-97赛季以西甲双冠王身份杀入欧冠8强后，马竞一度久别欧冠长达12年，直到2008年开始才重返欧冠，近4年连续参赛是队史纪录。本赛季是马竞首次欧冠小组赛开局五连胜，成为史上第3支做到这点的西甲球队，2011-12和2014-15赛季皇马曾两次5连胜开局，也是唯一两度做到这点的西甲豪门，巴萨(官网 数据) 唯一一次开局五连胜，要追溯到2002-03赛季。

                </div>

                <div>

                    IHSTechnology中国研究总监王阳表示，今年好几个大的手机厂商都亏得厉害，明年越亏越多，挺不住的就得倒掉 一个多月来，人民币汇率犹如坐上了滑梯，一路滑下，在即将跌至6.90关口之时，人民币对美元中间价结束了12连跌的戏码。部分分析人士认为，人民币回调主要受到美元指数小幅走跌的影响，之后，人民币贬值的压力仍然存在。 国信证券指出，人民币贬值利好海外业务收入占比高的行业。在各个出口目的地国家中，我国对美国和欧盟的出口金额占比超过1/3。例如，2015年前11个月，我国出口美国和欧盟的出口金额占比达到34%，因此人民币兑美元和欧元贬值将利好出口型企业。从A股上市公司2015年中报的海外业务收入占比情况看，电子、国防军工、家用电器、计算机、纺织服装等行业的海外业务收入占比超过20%。

                    不过，单从手机行业来看，除了华为、中兴这样全球化的公司会相对好一些之外，人民币贬值对手机厂商利润的伤害普遍存在。

                </div>

            </div>

        </div>

    </div>

</body>

css代码：

    <style media="screen">

        body {

            font-family: Verdana, Geneva, sans-serif;

            font-size: 14px;

        }

        .tab-box {

            width: 500px;

            margin: 30px auto;

        }

        .tab-box ul {

            list-style-type: none;

        }

        .tab-box li {

            float: left;

            width: 100px;

            background: #ccc;

            color: #09F;

            height: 30px;

            line-height: 30px;

            text-align: center;

            cursor: pointer;

            margin-right: 3px;

            font-weight: bold;

        }

        .tab-box li.active {

            background: #999;

            color: #F0F;

        }

        .tab-content {

            padding-left: 40px;

        }

        .tab-content div {

            width: 400px;

            height: 500px;

            padding: 15px 5px;

            color: #000;

            clear: left;

            display: none;

            background: #999;

        }

        /*//注意这里设置整个容器里的div为不可见的*/

        .tab-box div.active-txt {

            display: block;

        }

        /*//注意这里设置只有具有tabCont的div内容才可见*/

    </style>

js代码:

    <script type="text/javascript">

        $(function() {

            $(".tab-box li").each(function(index) {

                $(this).mouseover(function() {

                    $("li.active").removeClass("active"); //注意这里

                    $(this).addClass("active"); //注意这里

                    $(".tab-content div.active-txt").removeClass("active-txt");

                    $(".tab-content div").eq(index).addClass("active-txt");

                });

            })

        });

    </script>

jquery实现Tab选项卡菜单的更多相关文章

  1. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  2. 使用jQuery开发tab选项卡插件

    为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...

  3. jQuery实现TAB选项卡切换特效简单演示

    本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...

  4. js和jquery实现tab选项卡

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jQuery实现tab选项卡效果小demo

    html页面: <section> <h2>Section Title</h2> <ul class="tab-nav"> < ...

  6. Jquery tab 选项卡 无刷新切换

    转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...

  7. tab选项卡-jQuery

    上次用原生的js写了个tab选项卡   这次按照一样的思路用jQuery写了一个 ,直接看代码: /*布局*/ <div id="div1"> <input cl ...

  8. 打造简易可扩展的jQuery/CSS3 Tab菜单

    原文:打造简易可扩展的jQuery/CSS3 Tab菜单 今天我们利用jQuery和CSS3来打造一款简易而且扩展性强的Tab菜单,这款Tab菜单在切换时也有滑块的效果,先来看看效果图: 由与Tab菜 ...

  9. 下拉菜单效果和tab选项卡切换

    //下拉菜单效果和tab选项卡切换. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

随机推荐

  1. NodeJs之pm2

    pm2 pm2是一个进程管理工具,可以用它来管理你的node进程,并查看node进程的状态,当然也支持性能监控,进程守护,负载均衡等功能. 开发过程中建议时不时的参看官方详细命令行使用:命令行 pm2 ...

  2. NodeJs之调试

    关于调试 当我们只专注于前端的时候,我们习惯性F12,这会给我们带来安全与舒心的感觉. 但是当我们使用NodeJs来开发后台的时候,我想噩梦来了. 但是也别泰国担心,NodeJs的调试是很不方便!这是 ...

  3. 使用 Roslyn 编译器服务

    .NET Core和 .NET 4.6中 的C# 6/7 中的编译器Roslyn 一个重要的特性就是"Compiler as a Service",简单的讲,就是就是将编译器开放为 ...

  4. Chrome出了个小bug：论如何在Chrome下劫持原生只读对象

    Chrome出了个小bug:论如何在Chrome下劫持原生只读对象 概述 众所周知,虽然JavaScript是个很灵活的语言,浏览器里很多原生的方法都可以随意覆盖或者重写,比如alert.但是为了保证 ...

  5. python+uwsgi导致redis无法长链接引起性能下降问题记录

    今天在部署python代码到预生产环境时,web站老是出现redis链接未初始化,无法连接到服务的提示,比对了一下开发环境与测试环境代码,完全一致,然后就是查看各种日志,排查了半天也没有查明是什么原因 ...

  6. android studio 使用 jni 编译 opencv 完整实例 之 图像边缘检测！从此在andrid中自由使用 图像匹配、识别、检测

    目录: 1,过程感慨: 2,运行环境: 3,准备工作: 4,编译 .so 5,遇到的关键问题及其解决方法 6,实现效果截图. (原创:转载声明出处:http://www.cnblogs.com/lin ...

  7. 重新认识了下Entity Framework

    什么是Entity Framework Entity Framework是一个对象关系映射O/RM框架. Entity Framework让开发者可以像操作领域对象(domain-specific o ...

  8. 利用Select2优化@Html.ListBoxFor显示，学会用MultiSelectList

    最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法. 首先介绍多 ...

  9. 【读书】PHP程序员要读的书目(不断完善中)

    本文地址 分享提纲: 1. PHP 2. Linux 3. Apache/Nginx 4. Mysql 5.设计模式/架构 6. 缓存并发 7. 其他语言 8. 代码基础 9. 大前端 10. 管理生 ...

  10. Atitit 管理原理与实践attilax总结

    Atitit 管理原理与实践attilax总结 1. 管理学分类1 2. 我要学的管理学科2 3. 管理学原理2 4. 管理心理学2 5. 现代管理理论与方法2 6. <领导科学与艺术4 7. ...