效果图：

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

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选项卡菜单

效果图：

html代码：

css代码：

js代码:

推荐阅读