效果图：

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

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. 配置android sdk 环境

    1:下载adnroid sdk安装包 官方下载地址无法打开,没有vpn,使用下面这个地址下载,地址:http://www.android-studio.org/

  2. Spring基于AOP的事务管理

                                  Spring基于AOP的事务管理 事务 事务是一系列动作,这一系列动作综合在一起组成一个完整的工作单元,如果有任何一个动作执行失败,那么事务 ...

  3. angular2系列教程（六）两种pipe：函数式编程与面向对象编程

    今天,我们要讲的是angualr2的pipe这个知识点. 例子

  4. VSCode调试go语言出现：exec: "gcc": executable file not found in %PATH%

    1.问题描述 由于安装VS15 Preview 5,搞的系统由重新安装一次:在用vscdoe编译go语言时,出现以下问题: # odbcexec: "gcc": executabl ...

  5. 通过sails和阿里大于实现短信验证

    通过sails与阿里大于来实现注册短信验证码的发送,逻辑图如下 1.用户在客户端发送手机号给服务器,服务器接收到手机号,生成对应时间戳,随机四位数验证码 2.服务器将电话号码和验证码告诉阿里大于服务器 ...

  6. 去IOE的一点反对意见以及其他

    某天在机场听见两老板在聊天,说到他们目前销售的报表老跟不上的问题,说要请一个人,专门合并和分析一些发过来的excel表格,我真想冲上去说,老板,你需要的是一个信息处理的系统,你需要咨询么.回来一直耿耿 ...

  7. 关于SMARTFORMS文本编辑器出错

    最近在做ISH的一个打印功能,SMARTFORM的需求本身很简单,但做起来则一波三折. 使用环境是这样的:Windows 7 64bit + SAP GUI 740 Patch 5 + MS Offi ...

  8. MySQL加密

    MySQL字段加密和解密 1.加密:aes_encrypt('admin','key') 解密:aes_decrypt(password,'key') 2.双向加密 通过密钥去加密,解密的时候的只有知 ...

  9. CentOs7 +Jexus 5.8.2部署Asp.Net Core WebApi 1.0生产环境

    Jexus 是一款运行于 Linux 平台,以支持  ASP.NET.PHP 为特色的集高安全性和高性能为一体的 WEB 服务器和反向代理服务器.最新版 5.8.2 已经发布,有如下更新: 1,现在大 ...

  10. 微软开源全新的文档生成工具DocFX

    微软放弃Sandcastle有些年头了,微软最近开源了全新的文档生成工具DocFX,目前支持C#和VB,类似JSDoc或Sphinx,可以从源代码中提取注释生成文档之外,而且还有语法支持你加入其他的文 ...