效果图：

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

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. Git 子模块 - submodule

    有种情况我们经常会遇到:某个工作中的项目需要包含并使用另一个项目. 也许是第三方库,或者你 独立开发的,用于多个父项目的库. 现在问题来了:你想要把它们当做两个独立的项目,同时又想在 一个项目中使用另 ...

  2. 【WCF】自定义错误处理（IErrorHandler接口的用法）

    当被调用的服务操作发生异常时,可以直接把异常的原始内容传回给客户端.在WCF中,服务器传回客户端的异常,通常会使用 FaultException,该异常由这么几个东东组成: 1.Action:在服务调 ...

  3. 在 SAE 上部署 ThinkPHP 5.0 RC4

    缘起 SAE 和其他的平台有些不同,不能在服务器上运行 Composer 来安装各种包,必须把源码都提交上去.一般的做法,可能是直接把源码的所有文件复制到目录中,添加到版本库.不过,这样就失去了与上游 ...

  4. 120项改进：开源超级爬虫Hawk 2.0 重磅发布！

    沙漠君在历时半年,修改无数bug,更新一票新功能后,在今天隆重推出最新改进的超级爬虫Hawk 2.0! 啥?你不知道Hawk干吗用的? 这是采集数据的挖掘机,网络猎杀的重狙!半年多以前,沙漠君写了一篇 ...

  5. zookeeper源码分析之六session机制

    zookeeper中session意味着一个物理连接,客户端连接服务器成功之后,会发送一个连接型请求,此时就会有session 产生. session由sessionTracker产生的,sessio ...

  6. 【转】39个让你受益的HTML5教程

    闲话少说,本文作者为大家收集了网上学习HTML5的资源,期望它们可以帮助大家更好地学习HTML5. 好人啊! 不过,作者原来说的40个只有39个,因为第5个和第8个是重复的. 原文在此! 1. 五分钟 ...

  7. C#——传值参数(2)

    //我的C#是跟着猛哥(刘铁猛)(算是我的正式老师)<C#语言入门详解>学习的,微信上猛哥也给我讲解了一些不懂得地方,对于我来说简直是一笔巨额财富,难得良师! 这次与大家共同学习C#中的 ...

  8. 编译器开发系列--Ocelot语言6.静态类型检查

    关于"静态类型检查",想必使用C 或Java 的各位应该非常熟悉了.在此过程中将检查表达式的类型,发现类型不正确的操作时就会报错.例如结构体之间无法用+ 进行加法运算,指针和数值之 ...

  9. iOS中支付宝集成

    iOS中支付宝集成 如今各种的App中都使用了三方支付的功能,现在将我在使用支付宝支付集成过程的心得分享一下,希望对大家都能有所帮助 要集成一个支付宝支付过程的环境,大致需要: 1>公司:先与支 ...

  10. Web前端需要熟悉大学里【高大上】的计算机专业课吗？

    作为一名刚刚大学毕业,进入新的学习阶段的研究生,我必须说大学的专业课非常重要!不管你信不信,事实就是如此! 一.大学学习的专业课非常重要,它决定了我们能走到什么高度 前端的发展非常快,我常常觉得刚刚关 ...